IE7 Menu HasLayout issue - css

Question

So I have been Googling and I am quite sure my problem emerge from the hasLayout issues with IE7 and lower.
My problem:
See image here
The HTML Code under here. The problem lies between the id="header" div and the id="colortab" div.
<div id="header">
<div class="logo"><img src="images/logo.gif" border="0" alt="" /></div>
<div class="hotline"><img src="images/ds_garanti.png" border="0" alt="" /></div>
</div>
<div id="colortab" class="ddcolortabs">
<ul>
<li><span>Forside</span></li>
<li><span>Vi tilbyder</span></li>
<li><span>Faste Tilbud</span></li>
<li><span>Garanti</span></li>
<li><span>Kontakt</span></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu1_a" class="dropmenudiv_a">
Stål og smedearbejde
VVS arbejde
Udlejning
</div>
<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a">
Tilbud på stål og smedearbejde
Tilbud på VVS arbejde
Tilbud på udlejning
</div>
<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>
And the belonging CSS can be seen here http://mhlhost.com/stackstyle.css
Very much appriciated if someone can help me out here. I can't figure out which elements causes me trouble :(

Answer 1

Floating the header left will close the gap in ie6/7.
#header{
position:relative;
height:100px;
background-color:#fff;
width:855px;
float:left;
}