Why is there so much extra space in FireFox between the two floated blocks?
<html>
<head>
<style type="text/css">
#Container-900px {
width:900px;
padding: 10px;
border: 1px solid #CCCCCC;
}
#Container-900px .left { float:left; width:435px; height:300px; }
#Container-900px .right { float:right; width:435px; height:300px; }
/* float clearing for IE6 */
* html .clearfix{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
*+html .clearfix{
min-height: 1%;
}
/* float clearing for everyone else */
.clearfix:after{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
/* CSS3 Styles */
#Container-900px {
-moz-box-shadow: 0px 0px 12px #CCC; /* Firefox */
-webkit-box-shadow: 0px 10px 12px #CCC; /* Safari, Chrome */
box-shadow: 0px 0px 12px #CCC; /* CSS3 */
}
#Container-900px .left {
background-color: rgb(238, 238, 238);
}
#Container-900px .right {
background-color: rgb(238, 238, 238);
}
</style>
</head>
<body>
<h1>Software</h1>
<div id="Container-900px">
<div class="left">
</div>
<div class="right">
</div>
<div class="clearfix"> </div>
</div>
</body>
</html>