Welcome to WebmasterWorld Guest from 54.161.255.61

Forum Moderators: not2easy

Strange issue with gap between elements

   
1:11 pm on Feb 25, 2011 (gmt 0)

5+ Year Member



Hi, I have an issue with two elements in a container that have a gap between them but I cannot see where the gap is coming from.

Basically, I have a standard centered page layout, the relevant CSS for holding the elements (a banner and then a nav menu underneath) is:


body {
margin: 0px;
padding: 0px;
text-align: center;
}

#container {
width: 1024px;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color:#FFFFFF;
}


And the CSS for the elements is:


#topbanner {
width:974px;
}

#menubar {
width:974px;
float:left;
}


The banner goes across the top of the page and the idea is that the menubar (which contains a number of images and their rollovers) fits directly underneath without any gap. But there seems to be white space of about 5px in all browsers and I can't see why. I tried adding a clearfloat into the HTML, i.e:


.clearfloat {
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}


But this doesn't do anything.

HTML is currently:


<body>
<div id="container">
<div class="topbanner"><img src="image/banner2.png" alt="banner" /></div>
<div class="clearfloat"></div>
<div class="menubar">(various button images)</div>
<div class="clearfloat"></div>


Any ideas as this has me stumped!
2:53 pm on Feb 25, 2011 (gmt 0)



Hi,

I don't know if its just me, but I tried your code with Safari, Opera, and IE7 (using some placeholder images), and there doesn't seem to be any gap between the two Div's, but I did make two minor adjustments to your HTML:


<body>
<div id="container">
<div id="topbanner"><img src="image/banner2.png" alt="banner" /></div>
<div id="menubar">(various button images)</div>
<div class="clearfloat"></div>


In your CSS you listed menubar and topbanner as an id, but in your HTML it was a class. I also got rid of the clearfloat above menubar.
If my memory serves me right, you would only need a clearfloat after a floated div, as it prevents the div from running into any content which may be below.

Also for good measure you may want to add 0 margin and 0 padding to topbanner and menubar, as browsers can add there own if it hasn't been specified.


Let me know if this helps at all.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month