[CSS] IE doesn't understand width=50%

programming web dev
1

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%)?


<!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>