PDA

View Full Version : [CSS] IE doesn't understand width=50%


NeoDreamer
January 14th, 2008, 11:14 PM
I have a class called "half". It's a basic float left with width of 50%. On my page, I have two main halves and two additional inner halves inside the left main half. IE 6 & 7 both play a cruel joke on me by displaying my page in 3 different ways depending on slight fluctuations of browser width.

I increased the browser width one or two pixels on each successive screenshot. Firefox always displays the correct thing all the time (bottom image).

I can fix this problem by using width: 49%, but that's just a cheap way out. I want 50% exactly, godddamnit! :} BTW, how precise can CSS get with percentages? 1/10th of a percent (49.9%)? 1/100th of a percent (49.99%)?

http://img225.imageshack.us/img225/6282/ienc9.gif


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}

.half {
float: left;
width: 50%;
background: #efefef;
}
-->
</style>

</head>

<body>

<div class="half">
<div class="half">
25% left
</div>
<div class="half">
25% right
</div>
</div>

<div class="half">
50% right
</div>

</body>
</html>
Kotti
January 15th, 2008, 07:50 AM
Hmm. Try creating 2 different divs. Then float one of them 'left' and the other float 'right'.
DDD
January 15th, 2008, 10:39 AM
Also remember to clear your floats....people knock the "clearfix" but I use it often. Also another thing you can do is position the parent element relative, then position the right element inside the parent element absolute right "0" and top "0". then give the left element a margin right slightly bigger than the width of the right element. That is a poor man's way of faking floats. I actually try not use floats. My explanation needs a bit of massaging, but that is the basics of it.
NeoDreamer
January 15th, 2008, 01:29 PM
Both your methods may work, but that's at the expense of muddling the CSS with extra class definitions which all do the same thing. If only IE didn't exist....... :sure: