[BUG] Floats with Percent and IE

[lookslikepat]

Hi,
I’m fairly new to css (and this forum, hi!) and I’ve been struggling recently with a quirk in IE(7).

It involves floats (and yeah I’m trying to avoid them as much as I can, until IE shapes up and does it right). In the layout I’m using a bunch of position:relative & z-index to make a layered footer, with transparent png’s. I would’ve made it into one image, but I’m aiming for a fluid, 100%, centered layout.

So far so good right?
The problem arose when I looked at the layout in IE. Apparently that browser doesn’t like 2 floats with 50% widths inside a 100% div. I have to make one 49% and the other 50%. So, in an all MS IE world the math goes 49+50=99 and 50+50=101 ??
F.Y.I. I’ve zeroed out all margins and paddings, as you can see.

My question is, is this related to a float-bug, or a %-bug? Or a combination of them both? Or maybe I’ve missed some basic stuff about IE? (i.e. -Have you turned the computer on? :) )

Any and all light on this subject would be killer.

Here’s screenshot of that footer in Safari:
[img]http://ta-det-lugnt.se/data/49.percent.floats.inside.100.png[/img]
And here’s the basic code:

Code:

Lorem

Lorem

[Jonz]

No idea how and why it happens but if you use absolute positioning left and right 0 along with the floats it will work :)

http://johnsbeharry.com/lab/code/2-50-p … lumns.html
I made this little one for you ;)

[Jonz]

Ah mighty fine point no floats needed :|
:oops: …

[lookslikepat]

Thanks guys. Absolute it is.
Another reason to leave floats alone a few years.

For future reference, the new code is:

Code:

* { margin:0; padding:0; border:0; }
#footer {
height:347px;
position:relative;
z-index:1;
width:100%;
background:url(‘footer.jpg’) bottom left repeat-x;
overflow:hidden;
}
.leftcolumn, .rightcolumn {
padding-top:242px;
position:absolute;
bottom:0px;
z-index:1000;
height:105px;
width:50%;
}
.leftcolumn {
background:url(‘footer-bl.jpg’) bottom left no-repeat;
left:0px;
}
.rightcolumn {
background:url(‘footer-br.jpg’) bottom right no-repeat;
right:0px;
}

[Jonz]

^^ Ye floats can sometimes be hard to manipulate but as long you practice you should get accustomed to what to and not do :)

[Author]

Posts