This I believe is a known issue with IE6 but I have been reading CSS articles for days and have yet to come up with a solution that works for the layout I am trying to make. This is a standard 2 column layout where the left column is a navbar. Only the navbar is expandable. There are hidden list elements that become visible when certain parts of the navbar are clicked. In this example I made 2 links that toggle the visibility of the additional links on the navbar and a small javascript function to handle the expand/collapse events. Firstly I implemented min-width for IE 6 by using the method found at http://www.cssplay.co.uk/boxes/width.html The content div has no width specified so it will auto size when the viewport is resized. However if you place an element with a set width like a image or table the content div cannot continue to shrink and due to some poor IE functionality it forces the content div BELOW the bottom of the floated left column. This has been driving me nuts for some way to keep the content from shifting down and just have a horizontal scrollbar appear instead. Thats why I implemented min-width in the first place. See the test page I uploaded at http://home.insightbb.com/~spiehler/intranet/test.asp Now one thing I found while playing with the margins. Setting a large negative bottom margin on the floated column keeps the content from being pushed down! When the viewport shrinks to the point to where it would normally be pushed, it wants to go below the float. If you put the bottom-margin:-2000px for example IE will think it is already at the bottom of the float and will not move the content down. See example of this 2nd attempt here http://home.insightbb.com/~spiehler/intranet/test2.asp SUCCESS.. well not really.. Notice the footer has property clear:both to make sure that the footer is pushed down when the navbar expands. When the hidden content on the navbar becomes visible via 'display:block' it will no longer expand its containing block when its height increases. This is because of the large negative margin I placed on the navbar. I will have multiple expandable sections on my navbar and it is imperative that they don't get "hidden" when they become expanded. So this negative margin trick won't work for me. Can anyone come up with or know where to direct me to find an alternate solution for the IE float bug pushing the content down? Code for TEST.ASP that illusatrates the problem. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>IE6 Float Push down problem</title> <script type="text/javascript"> function expand () { var temp = document.getElementsByName("hidden"); for(var i = 0;i<temp.length;i++) { temp[i].style.display = "block"; } } function hide () { var temp = document.getElementsByName("hidden"); for(var i = 0;i<temp.length;i++) { temp[i].style.display = "none"; } } </script> <style type="text/css"> html, body {margin:0;} div#minwidthcontainer {min-width:700px;} body {background:green;} div#header, div#footer {background:#e5e5e5;height:40px;position:relative;} div#navbar { width:200px; float:left; border:solid 1px black; background:teal; } div#navbar ul { list-style:none; padding:0; margin:0; } div#navbar ul li { width:199px; border:1px solid black; } div#navbar li a { width:100%; /* make white space in link clickable instead of just the text */ display:block; color:white; text-indent:10px; } .hidden {display:none;} div#content { background:orange; border:solid 1px black; margin-left:202px; margin-right:50px; min-height:500px; padding:10px; } div#footer {clear:both;} </style> <!--[if lte IE 6]> <style type="text/css"> /* min-width for IE6 */ div#minwidthcontainer { border-left:700px solid green; position:relative; float:left; z-index:1; } div#minwidth { margin-left:-700px; position:relative; float:left; z-index:2; } /* end min-width for IE6 */ /* IE 6 treats height as min-height, it will expand the containing block instead of allowing the content to overflow */ div#content { height:500px;} </style> <![endif]--> </head> <body> <div id="minwidthcontainer"> <div id="minwidth"> <div id="header" class="header"> Header </div> <div id="navbar"> <ul> <li><a href="#" onclick="expand()">Expand Additional Links</a></li> <li><a href="#" onclick="hide()">Hide Additional Links</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li><a href="#">Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> <li id="hidden" name="hidden" class="hidden"><a href="#">Hidden Link X</a></li> </ul> </div> <div id="content" class="content"> <p>page content here</p> <p>page content here</p> <p>page content here</p> <p>page content here</p> <img src="foo" width="600" height="200" alt="fake image"/> </div> <div id="footer" class="footer"> Footer Text </div> </body> </div> </div> </html> HTML: The only difference added to TEST2.ASP is div#navbar {bottom-margin:-2000px;} Code (markup): Note: For those of you who are planning on posting something about validating my html I realize that I have multiple navbar items with the same ID=hidden and that this is not proper practice as ID should be unique. But the function getElementsByName when called in IE will not reference the objects by their name attribute. It will only reference them by their ID attribute. So a quick way to collect an array of references that works cross-browser is to set both their name, and id to be the same. If I really need it to validate I would write some other function to collect the object references but for a layout example like this it has no effect on the problem. Thanks for reading. -Dave