All geek questions in one place

Why is there an extra “white space” between these floating divs in FF and not IE?

Why is there so much extra space in FireFox between two floating 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>
+3
source share
3 answers

Since doctype is omitted, which causes IE to display in quirksmode (which is bad). If you confirmed it using the W3 HTML validator , it should also have errors regarding the missing doctype.

doctype HTML CSS ( , MSIE , ).

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

, #Container-900px .left #Container-900px .right 445px , 10px .

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

, .

+9

? - 435px 30px 900px. , FF, Opera Chrome. IE . , doctype?

0

css reset: http://meyerweb.com/eric/tools/css/reset/ . "" .

0

Source: https://habr.com/ru/post/1731263/

More articles:


All Articles