Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

Strange issue with gap between elements

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

Junior Member

5+ Year Member

joined:Jan 14, 2008
posts: 154
votes: 0

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;

And the CSS for the elements is:

#topbanner {

#menubar {

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 {
font-size: 1px;
line-height: 0px;

But this doesn't do anything.

HTML is currently:

<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)

New User

5+ Year Member

joined:Feb 17, 2011
votes: 0


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:

<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.

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members