Hi,
Try adding height:1% to the parent div.
Code:
<div style="background-color:#009999; margin-left: 150px; margin-right: 150px;height:1%">
<div style="float: left; width: 50%; background-color:#009900;"> left col
in "text-area" </div>
<div style="float: left; width: 50%; background-color: #00CC99; margin: -1px;">
right col in "text-area" </div>
<div style="clear: both;"> solo col in text adrea and with clear:both </div>
</div>
This really needs to be hidden from ie5 mac and other browsers so use this format instead.
Code:
/* commented backslash hack v2 \*/
* html #elementname {height:100%;}
/* end hack */
If that doesn't work then the last resort is to add an inner wrap to that centre content which has a width of 99.9% and is floated also. Then the clearer div only clears within its own context (although this is not guaranteed cross browser behaviour as clear:both may in fact clear all floated elements and not just those in their own stacking context. However it seems to work ok on most browsers.)
However I think my first solution of height:1% will work fine. Ie treats height as min-height anyway and will just expand the container as rewuired. However it helps IE to work out its width correctly and maintains its integrity better.
paul
Bookmarks