Archive for August, 2008

CSS: Float in Firefox and IE

Wednesday, August 13th, 2008

Today I come across basic problem that most web designer face. If only there was one Internet browser in the world, life would be much easier. When you float an element in IE, it does not really float, instead the margin is still affecting other element as you can see in the following illustrations:

<style type="text/css">
	body {
		width:400px;
	}
	div {
		width:200px;
		height:50px;
		background-color:#0099FF;
	}
	div#a {
		float:right;
		margin-left:10px;
		background-color:#FF9900;
	}
</style>
<body>
<div id="a">
 
</div>
 
<div id="b">
 
</div>
</body>

CSS Float experiment result in Internet Explorer 7

Now Here is what it looks like under Firefox 3.0:

CSS Float experiment result with FireFox