Question about borders

[mike314]

<div id="main" style="width: 300px; border: 1px solid #000; padding: 5px;">
<div id="left" style="float: left;">
<div id="title" style="border-bottom: 1px solid #3366CC;"><span style="font-family: Arial,; font-size: 14px; font-weight: bold; color: #3366CC">Text</span></div>
</div>
<div id="right" style="float: right;">text text text text text text</div>
</div>


I've got a small issue here, I'm trying to get a two column div design going with a border around it and it works fine in IE6 but in Firefox 2 it displays both the inner divs below the main div, thus the border is not correctly around it. I've tried padding, fixed widths and nothing.


Anyone have ideas, am I doing something wrong?

thanks

[WebJoel]

<div id="main" style="width: 300px; border: 1px solid #000; padding: 5px; overflow:hidden;">
<div id="left" style="float: left;">
<div id="title" style="border-bottom: 1px solid #3366CC;"><span style="font-family: Arial,; font-size: 14px; font-weight: bold; color: #3366CC">Text</span></div>
</div>
<div id="right" style="float: right;">text text text text text text</div>
</div> When you 'float' children elements inside of a 'parent' element and want the 'parent' to enclose these children ,you have to add "overflow:hidden;".

This is because "floats" are 'lifted' from the document and exert no 'internal pressure' on the parent container. "overflow:hidden;" tells the parent container to 'enclose' the floated children elements. IE6 incorrectly shows what you wanted to do, Fx shows you correctly what you have done. :)

Try this (I didn't test this, but this should do the trick).