Common, yet Frustrating CSS Problem

Clear property not working in this instance.

[Tom_Cash]

Hey peeps,
Usually when I have this problem I whack in clear: both and it's done with.

However, this time around I'm having no such luck and I'm completely stumped!

I have a div containing two sub-divs. The two sub-divs act as columns and should stretch the main div which is basically a border. However, they don't! Here's my code. Any help would be massivly appreciated.

<div id="content">
<div id="item-left">
<img src="product.jpg" alt="product name" id="product">
<p><b>Stock ID:</b> ...<br><b>Price:</b> £149.99<br><span id="in-stock">In Stock</span></p>
</div>
<div id="item-right">
<p>Product info which varies in size.</p>
</div>
</div>

#content { width: 668px; min-height: 311px; padding: 10px; border-left: 1px solid #6CF; border-right: 1px solid #6CF; border-bottom: 1px solid #6CF; margin: 0 0 15px 0; }
#item-left { width: 310px; float: left; }
#item-right { width: 348px; float: right; padding: 0 0 0 10px; }
img#product { display: block; padding: 4px; border: 1px solid #F33; float: left; margin: 0 0 10px 0; } 

The only browser this displays correct in is IE8 - for once.

Again, thanks in advance,
Tom.

[alias]

Add #content { overflow: hidden; zoom: 1; }.

[Major_Payne]

You have set a fixed width for the main div. The two "sub-divs" will just float left and right until they hit the limits of their containers. Both their widths are 658px, but remember you have set a 10px padding for the main div which must be taken into account.

Ron

[Tom_Cash]

Alias, that worked perfectly. Thank you very much! I'll be sure to learn what those tags do in more depth.

MP, the reason the two divs fall 10px short is because of the 10px margin that keeps them apart.

[alias]

Tom, it's more like a trick.

To explain it briefly -- if all nodes in a container are floated either side, the container loses it's height, because it thinks it's empty.

To make it wrap around the floated nodes, you either:
- add overflow:hidden (overflow:auto also works, but a bit differently, look into that) and zoom:1 (that's for the great IE family)
- or do a trick called 'clearfix', which you can investigate by searching the web for it, you'll definitely come across some helpful articles

[Tom_Cash]

Excellent. Again, thanks very much. I appreciate your time mate.

[Major_Payne]

Alias, that worked perfectly. Thank you very much! I'll be sure to learn what those tags do in more depth.

MP, the reason the two divs fall 10px short is because of the 10px margin that keeps them apart.

I know that. Hope you do now. Just remember to clear your floats when necessary.