CSS: Float in Firefox and IE

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

Leave a Reply

Your email address will not be published. Required fields are marked *