Hello, I'm trying to do a simple three column layout, with two divs (#left and #right) floating left and right, and the #content-div with margins in between, and all three in a wrapper-div.
The goal is to get equal height columns (with #content having another background-color than the two other divs). The two divs on the sides and the wrapper get the same background-color #222, and the content-div gets #555. All works fine, as long as the content-div is taller than the two side-columns. For the case that the content-div is shorter I put a clearing div at the end of the middle div, which should pull it down and extend the background-color for the middle div. At http://zynist.homepage.t-online.de/layout1.html I have an example. In Opera and Firefox all works fine. The problem comes when its viewed in IE (6.0 and lower). The text stays in place, but the background color of the middle column extends to the left and below the left #left-div, ruining the layout. And the text in middle column is not visible at first, but appears when the browser window is resized. But when the middle column is shorter than both side-columns the clearing is fine again, as shown in http://zynist.homepage.t-online.de/layout2.html. But the problem with the visibility of the text persists. I read about the peek-a-boo bug and all that stuff, and I tried the Holly Hack and other things. But then the strange behaviour in IE stops, but the clearing div doesn't get pulled down under the two side columns but sits just below the content-div, as shown in http://zynist.homepage.t-online.de/layout3.html. I hope someone can give me a hint what's wrong here. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
