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:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Yeah I think that is a problem trying to line up two things of 50% width next to each other with floats. Jonz example does work, although it doesn’t even need the float attribute when using absolute positioning. If your two sides don’t have different backgrounds, using 49% should work fine as well.