Forum Moderators: open

Message Too Old, No Replies

Frustration with floats and weird wrapping...

         

rayvd

8:09 pm on May 15, 2003 (gmt 0)

10+ Year Member



I'm trying to create a basic page with a couple of floating boxes on the right, and a main text area on the left. It works fine until I try to add in a small "blurb" box within the main text area. Basically I want this blurb to be in a small box of its own, with a background of gray... just to kind of stand out from the rest of the text in the body. However, when I use <div> or <p> to make the box and give it a background color, the text wraps correctly, but the box itself extends all the way over to the right, right over the top of the floating boxes on the edge of the browser window. Why don't the boxes stop where the text does?

Here's my code (validated):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Test XHTML Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html {
font-family: arial, helvetica, sans-serif;
font-size: 8pt;
}
div#main {
}
div#right {
float: right;
width: 200px;
}
div.infobox {
border: 1px solid black;
}
div.infobox .header {
background-color: #DEDFDF;
margin: 0px;
padding: 4px;
border-bottom: 1px solid black;
}
div.infobox .contents {
padding: 5px;
}
div.blurb {
background-color: #DEDFDF;
border: 1px solid black;
padding: 3px;
}
</style>
</head>
<body>
<div id="content">
<div id="right">
<div id="forumsataglance" class="infobox">
<div class="header">
<strong>Forums at a Glance</strong>
</div>
<div class="contents">
<strong>General Forums</strong><br />
The General Forums are for postings about different "Topics" in this
industry.<br />
<br />
<strong>Product Forums</strong><br />
The Product Forums are for postings about specific "Brands or
Products." This is NOT the place to buy and sell specific products,
nor is it the place to "blast" a particular company.
</div>
</div>
</div>
<div id="main">
<p>
This is where the content will go. It will be very excellent content
and will be enjoyed by all participants!
</p>
<div class="blurb">
<strong>Please note</strong>: We will continue adding new
manufacturer and product forums as time and space allow. If you have
any suggestions for a forum you would like to see added to our list,
please feel free to email us.
</div>
</div>
</div>
</body>
</html>

Looks like my intents weren't preserved. Oh well, you get the idea :) Would appreciate any suggestions on how to do this correctly. Should I resort to using a table? :( Oddly enough, NN 4.x is the only browser it looks "right" in to me :)

drbrain

8:28 pm on May 15, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Its the content of .blurb that flows around the float, not the border/background. Its doing exactly as it is supposed to. You can set margin-right to some appropriate value, or you can give .blurb some width.

papabaer

8:30 pm on May 15, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The behavior you see is correct. The "float" literally floats over the div or p elements in your example. These elements will still expand to their normal constraints (parent container). Any background color applied will render according the elements intrinsic dimensions. The content however IS pushed aside by the "float."

rayvd

8:41 pm on May 15, 2003 (gmt 0)

10+ Year Member



Awesome! margin-right did the trick. Thanks much, still getting used to the concepts of containers and flow and such.