Forums

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:
http://ta-det-lugnt.se/data/49.percent.floats.inside.100.png
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\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" dir=\"ltr\" lang=\"sv-SE\">
<head profile=\"http://gmpg.org/xfn/11\">
    <title></title>
    <meta http-equiv=\"content-type\" content=\"text/html; charset=UTF-8\" />
	<style type=\"text/css\">
	/* <![CDATA[ */
	* { 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:relative;
	    z-index:1000;
	    height:105px;
	    width:50%; /* 50% isn't half of 100% according to <IE7 ?  */
	}
	.leftcolumn {
	    background:url('footer-bl.jpg') bottom left no-repeat;
	    float:left;
	}
	.rightcolumn {
	    background:url('footer-br.jpg') bottom right no-repeat;
	    float:right;
	}
/* ]]> */
</style>
	</head>
<body>
<div id=\"footer\">
    <div class=\"leftcolumn\">
        Lorem
    </div>
    <div class=\"rightcolumn\">
        Lorem
    </div>
</div>
</body>
</html>

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 ;)

chriscoyier

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.

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:

* { 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 :)

treehouse : what would you like to learn today?

Forums

[BUG] Floats with Percent and IE