Home/ Questions/Q 592861
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T15:47:03+00:00

Why is there so much extra space in FireFox between the two floated blocks?

  • 0

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">&nbsp;</div>
 </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Because the doctype is omitted which causes IE to render in quirksmode (which is bad). If you have validated it with the W3 HTML validator, it should also have errored about a missing doctype.

    Adding a strict doctype should make the HTML and CSS to behave consistent among all major browsers (leaving aside the fact that MSIE has still many bugs left to potentially fix).

    <!doctype html>
<html lang="en">
    <!-- here you go -->
</html>

    Further also give #Container-900px .left and #Container-900px .right a width of 445px so that it fits nicely along the 10px margin of the container.

    #Container-900px .left { float:left; width:445px; height:300px; }
#Container-900px .right { float:right; width:445px; height:300px; }

    This way it looks good and the same in all browsers.

    • 0