Question

I’ve been running into a presentation issue with Internet Explorer. The following simple block of code renders as I would expect it to in Safari, FireFox, Chrome, and Opera. However it results in a noticeable space between the left and right floated DIV elements in both IE6 and IE7.

My question is: Is there a more correct way to achieve a float such that the same CSS works in both IE and the other browsers I’ve mentioned? If not, what is the best approach for getting rid of the space in Internet Explorer?

Thanks, Matt

<style> .left {     width:100px;     float:left;     border: solid black 1px; }  .right {     width: 100px;     margin-left:100 px;     border: solid red 1px; } </style>  <div class='left'>     a </div> <div class='right'>     b </div> 

Since this is a community wiki. I thought I’d post the working code with the solution proposed below by Plan B.

<style>         .left {         width:100px;         border: solid black 1px;         float:left;     }      .right {         width:100px;         border: solid red 1px;         float:left;     }     .clear {         clear:both;     } </style>  <div class='left'>     a </div> <div class='right'>     b </div> <div class='clear'></div> c 

Answer 1

Float them both left, add the following after both divs:

 <div class='clear'></div>   .clear { clear: both; } 

That or use padding instead of margins.