Problem with clearing in IE

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.

re: Problem with clearing in IE

"Werner Hempel" <wehe@gmx.net> wrote in message
news:1133992235.545768.155370@g49g2000cwa.googlegr oups.com...[color=blue]
> 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.[/color]

With just styling the divs this can be tricky. You can cheat though, by
setting the backround of the container div to an image. A good explanation
of how to do this can be found at:-

http://www.alistapart.com/articles/fauxcolumns/
[color=blue]
> At http://www.geocities.com/dvdchazz/layout1.html I have an example.[/color]

A bit hard to look at the page properly because of the ad bar (at leat in
IE - I can block ads in firefox). Can the ads be turned off? Never mind, I
hope the idea I suggested helps.

Martin

--
Martin Eyles

re: Problem with clearing in IE

On Thu, 8 Dec 2005 10:32:19 -0000, "Martin Eyles"
<martin.eyles@NOSPAM.bytronic.com> wrote:
[color=blue]
>"Werner Hempel" <wehe@gmx.net> wrote in message
>news:1133992235.545768.155370@g49g2000cwa.googleg roups.com...[color=green]
>> 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.[/color]
>
>With just styling the divs this can be tricky. You can cheat though, by
>setting the backround of the container div to an image. A good explanation
>of how to do this can be found at:-
>
>http://www.alistapart.com/articles/fauxcolumns/
>[/color]

Thanks, I know the faux columns trick. But I want to achieve this
without background images and with as few extra divs as possible. The
only constriction is that with this method the two side divs can't
have different colors.

[color=blue][color=green]
>> At http://www.geocities.com/dvdchazz/layout1.html I have an example.[/color]
>
>A bit hard to look at the page properly because of the ad bar (at leat in
>IE - I can block ads in firefox). Can the ads be turned off? Never mind, I
>hope the idea I suggested helps.[/color]

Oops, I just forgot they have ads. I put the examples here:
http://zynist.homepage.t-online.de/

re: Problem with clearing in IE

Werner Hempel wrote:[color=blue]
> 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.[/color]
<...>

I saw a really good example of a 3-column layout. IIRC it was on the
"Position is Everything" website - that might help you solve the
problem.

re: Problem with clearing in IE

On Thu, 08 Dec 2005 11:03:17 -0800, Tony wrote:
[color=blue]
> I saw a really good example of a 3-column layout. IIRC it was on the
> "Position is Everything" website - that might help you solve the
> problem.[/color]

http://positioniseverything.net/articles/onetruelayout/

regards,
--
Robert
http://brightonfixedodds.net

re: Problem with clearing in IE

Robert Frost-Bridges wrote:[color=blue]
> On Thu, 08 Dec 2005 11:03:17 -0800, Tony wrote:
>[color=green]
> > I saw a really good example of a 3-column layout. IIRC it was on the
> > "Position is Everything" website - that might help you solve the
> > problem.[/color]
>
> http://positioniseverything.net/articles/onetruelayout/
>[/color]

Yep - that was it :)

re: Problem with clearing in IE

[color=blue][color=green]
>> I saw a really good example of a 3-column layout. IIRC it was on the
>> "Position is Everything" website - that might help you solve the
>> problem.[/color]
>
>http://positioniseverything.net/articles/onetruelayout/
>[/color]

Thanks for the tip, but that's a very laborious way with a lot of
hacks. My approach seems much simpler to me, and I just wanna know
what's happing and why it doesn't work. I'm not even sure if I will
use this layout, but I'm really interested in finding out if it can
work.

re: Problem with clearing in IE

Werner Hempel wrote:[color=blue]
> On Thu, 8 Dec 2005 10:32:19 -0000, "Martin Eyles"
> <martin.eyles@NOSPAM.bytronic.com> wrote:[color=green]
>>
>>http://www.alistapart.com/articles/fauxcolumns/[/color]
>
> Thanks, I know the faux columns trick. But I want to achieve this
> without background images and with as few extra divs as possible.[/color]

Good luck with that. As it stands now, you're stuck with using kludges
like background images mostly because of IE.

If you didn't have to be concerned with IE, lots of things would be easier.

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

re: Problem with clearing in IE

Robert Frost-Bridges wrote:[color=blue]
>
> http://positioniseverything.net/articles/onetruelayout/[/color]

It will be interesting to see what IE7 does with this...

--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share.

re: Problem with clearing in IE

On Thu, 08 Dec 2005 19:25:29 -0600, kchayka <usenet@c-net.us> wrote:
[color=blue]
>Good luck with that. As it stands now, you're stuck with using kludges
>like background images mostly because of IE.
>[/color]

Well, there's still the possibility to use negative margins.
But I thought most of the IE bugs can be somehow fixed. But here I
can't find a way. Either because it's impossible, or it so simple ;)
[color=blue]
>If you didn't have to be concerned with IE, lots of things would be easier.[/color]

Learned that the hard way.