homepage Welcome to WebmasterWorld Guest from 54.205.189.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Strange issue with gap between elements
galahad2




msg:4272260
 1:11 pm on Feb 25, 2011 (gmt 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;
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!

 

TheStranger




msg:4272314
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved