Home/ Questions/Q 106855
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T01:39:45+00:00

I have created a simple grid of divs by left floating them and an

  • 0

I have created a simple grid of divs by left floating them and an empty div with a clear at the end of each row.

This works fine in Firefox, but in IE I get extra vertical space between rows. I tried to apply the ‘clearfix’ method, but I must be doing something wrong.

Why does IE insert the extra vertical space and how can I get rid of it?

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'> <html>   <head>     <title></title>     <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>     <style>         root {             display: block;         }          body {             background: white;         }          .colorChip {             position:relative;             float: left;             width: 20px;             height: 20px;             margin: 2px;             border-style: solid;             border-width: 1px;             border-color: black;         }          .clear {             clear: both;         }          .clearfix {             display:inline-block;         }          .clearfix:after, .container:after {             clear:both;             content:'.';             display:block;             height:0;             visibility:hidden;         }          * html .clearfix {             height:1%;         }         .clearfix {             display:block;         }      </style>     <!--[if IE]> <style type='text/css'>   .clearfix {     zoom: 1;     /* triggers hasLayout */ </style> <![endif]-->    </head>    <body>     <div class='colorChip clearfix' style='background: rgb(163,143,88)'></div>     <div class='colorChip' style='background: rgb(190,170,113)'></div>     <div class='colorChip' style='background: rgb(190,250,113)'></div>     <div class='clear'></div>     <div class='colorChip clearfix' style='background: rgb(187,170,128)'></div>     <div class='colorChip' style='background: rgb(215,197,154)'></div>     <div class='colorChip' style='background: rgb(243,225,181)'></div>     <div class='clear'></div>     <div class='colorChip clearfix' style='background: rgb(104,94,68)'></div>     <div class='colorChip' style='background: rgb(129,118,92)'></div>     <div class='colorChip' style='background: rgb(155,144,116)'></div>     <div class='clear'></div>   </body> </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. IE is a bit funny about empty <div>s – it likes to give them the height of a line of text.

    If you change .clear to this, it’ll shrink to 1 pixel:

        .clear {         clear: both;         height: 1px;         overflow: hidden;     }

    Put a background colour on to see what’s happening

    • 0