Float in IE 6

I'm attempting to eliminate tables from my diet and rely instead on
nutritious and tasty CSS. However, every time I do, IE6 makes me
nauseous.

In what I would think would be a very straight-forward layout, I have
a long, thin div on the left and two short, wide divs on the right --
a cinch to do in tables. (See www4.scoe.net/rfox/seeds2.) I added a
"float:left" to the left div so the other two divs would fall next to
it instead of below it. Works great in everything but IE6, where it
shoves the two right-hand divs down beneath the left box. How can I
make it behave consistently in IE6?

BTW, it looks fine in IE7, but unfortunately IE6 is still alive and
kickin'.

-Ray

In article
<1193181267.533764.88020 (AT) t8g2000prg (DOT) googlegroups.com>,
rfox (AT) scoe (DOT) net wrote:

I'm attempting to eliminate tables from my diet and rely instead on
nutritious and tasty CSS. However, every time I do, IE6 makes me
nauseous.

In what I would think would be a very straight-forward layout, I have
a long, thin div on the left and two short, wide divs on the right --
a cinch to do in tables. (See www4.scoe.net/rfox/seeds2.) I added a
"float:left" to the left div so the other two divs would fall next to
it instead of below it. Works great in everything but IE6, where it
shoves the two right-hand divs down beneath the left box. How can I
make it behave consistently in IE6?

BTW, it looks fine in IE7, but unfortunately IE6 is still alive and
kickin'.

-Ray

You might consider wrapping the blue and yellow boxes in a div
and giving that div the left margin and width and taking same off
the yellow and blue boxes:

<div class="blueAndYellowBoxes">
....your blue and yellow box code...
</div>

and something like:

..blueAndYellowBoxes {
width: 400px;
margin-left: 240px;
}

You know that IE6 adds 3px next to floats in some circumstances?
But I think you might have room to spare in this case.

--
dorayme

You might consider wrapping the blue and yellow boxes in a div
and giving that div the left margin and width and taking same off
the yellow and blue boxes

Thanks for the suggestion, dorayme, but it didn't work. Just wrapping
the two right boxes in another div still faces the same problem where
IE6 pushes them down beneath the div on the left. (See www4.scoe.net/
rfox/seeds2/index2.html.)

It seems like this should be so easy, but nuttin' seems easy with IE6.

-Ray

Actually, dorayme, you provided the clue that I needed!

You know that IE6 adds 3px next to floats in some circumstances?

By shaving a few pixels off the width of the two right divs, they
popped up into place. (See www4.scoe.net/rfox/seeds2.)

Thank you for pointing the way!

-Ray

rfox (AT) scoe (DOT) net wrote:

By shaving a few pixels off the width of the two right divs, they
popped up into place. (See www4.scoe.net/rfox/seeds2.)

FYI, there is a large amount of horizontal scrolling, even in a
1600x1200 maximized window, but it's just empty space over there on the
right. This is caused by improper use of position:relative on #loginbox,
which offsets is normal position by left:635px, pushing it off screen.
http://brainjar.com/css/positioning/

Also, the left column is longer than it's container and overlaps the
green footer. Zoom text up a little in Firefox and you'll see this, too.

Looks like you've got some extra <br> in there. If that is an attempt to
make the container big enough to fit all the rounded boxes, it isn't
working. Get rid of them and learn the value of the "clear" property.
Apply it to the footer. See also
http://www.quirksmode.org/css/clearing.html

--
Berg