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, which should pull it down and extend the background-color for the
middle div. At http://www.geocities.com/dvdchazz/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 middle column extends to the left and below
the left #left-div, ruining the layout.
But when the middle column is shorter than both side-columns all is
fine again, as shown in http://www.geocities.com/dvdchazz/layout2.html.
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://www.geocities.com/dvdchazz/layout3.html.
I hope someone can give me a hint what's wrong here.
