Question : Internet Explorer 6 float workaround

I have developed a website addition for a client who still uses AOL/IE 6 as do many of his users.  The website looks fine in Firefox and later versions of IE, but not in IE 6.  The addition uses float to manage columns of data instead of tables, working correctly in modern browsers but the floats are horribly broken in IE 6.

There are several examples, but one of the clearest is found here:
http://www.leadtackle.com/index.php?option=com_classifiedads&

Note that a CMS is in use, so only the white area of the page is applicable to my question, which contains the list of posts and the list of category for browsing.

There are two main columns enclosed in a container like so:
<div id="view">
 <div id="posts">
    ...
  </div>

  <div id="browse">
    ...
  </div>
</div>

The "view" div has a fixed width of 700px, the "post" div is floated to the left with a width of 450px, and the "browse" div is floated to the left with a width of 150px plus a 50px left margin.  In IE 6/AOL, the browse div is placed under the posts div breaking the entire layout of the page.  I use float/columns for several other pages containing form elements which are even more broken than this page.

Everything is setup correctly for a basic 2-column layout, so I need to know what kind of workaround can be used to get at least IE 6 working correctly with these floats.  Any suggestions or possible resources on why IE 6 is behaving so poorly in this regard?  The HTML and CSS can be accessed from the above link, but I can provide additional information as required.

Thanks in advance for your help.

Answer : Internet Explorer 6 float workaround

normally when I use floats within IE6, IE6 just needs more space in the container than IE7+, Firefox, Chrome etc.
Random Solutions  
 
programming4us programming4us