gap between div in Internet Explorer

Hello all.

I am totally new to CSS layout but I have spent the last 4 days reading books and articles online, so I feel comfortable with the syntax and the "theory" behind CSS and CSS positioning.

I am attempting to put together a 2 column layout with a header and a footer. The layout works properly in Firefox, but it does not work properly in Internet Explorer 7. The trouble I am having is there is a gap between the header div, and the columnLeft and columnRight divs.

This gap does not appear in Firefox or Safari.

I have read many articles concerning this type of bug and they all point to the "collapsing margins" issue, which I somewhat understand but the workaround of removing the margins from the first tag that appears in the div does not appear to be working.

Note also that the "bug" only appears when I use an image in the header div. If I replace the image with <h1>header test</h1> then all the divs line up against each other (which is exactly what I want).

I have spent a lot of time trying to troubleshoot this and I'm just too new to CSS layout to understand why the gap is appearing. I really appreciate any assistance you can offer.

As an aside, I have validated both the HTML and the CSS using the validator tools at validator.w3.org.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<link href="/css/test.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
<div id="container"> 
 <div id="header"> 
 <img src="/images/header/top_cap.gif" alt="top cap" width="720" height="30" /> 
 </div> 
  
 <div id="columnRight"> 
 <h1>columnRight</h1> 
 </div> 
  
 <div id="columnLeft"> 
 <h1>columnLeft</h1> 
 </div> 
  
 <div id="footer"> 
 <h1>footer</h1> 
 </div> 
</div> 
</body> 
</html>

And here is the very simple stylesheet:

@charset "UTF-8"; 
body { 
font: 100% Verdana, Arial, Helvetica, sans-serif; 
background: #666666; 
margin: 0; 
padding: 0; 
text-align: center; 
color: #000000; 
} 
#container { 
width: 720px; 
margin: 0 auto; 
border: 1px solid #000000; 
text-align: left; 
background: red; 
} 
#header { 
width: 100%; 
background: orange; 
} 
#columnRight { 
float: right; 
width: 50%; 
background: blue; 
} 
#columnLeft { 
float: left; 
width: 50%; 
background: green; 
} 
#footer { 
clear: both; 
width: 100%; 
background: yellow; 
} 
h1 { 
margin: 0; 
}

gap between div in Internet Explorer

Zuna

Zuna

SuzyUK

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week