1. Home
  2. Forums Index
  3. Browser Side / CSS 10:53 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

unwanted gap between divs

         

blueman2

8:06 pm on Oct 30, 2008 (gmt 0)

10+ Year Member



There is about a 14 px gap between two divs; #bot-nav & #foot bot. Can some one tell me how to get rid of this gap and why it is happening. Thanks


@charset "utf-8";
body {
margin: 0;
padding: 0;
background: #000000;

<!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></title>

<link href="../Saxstorage/sax-style.css" rel="stylesheet" type="text/css" />
</head>
</style>

<body>

<div id="wrapper">
<div id="header"></div>
<!-- TemplateBeginEditable name="main" -->
<div id="maincontent"></div>
<!-- TemplateEndEditable -->
<div id="bot-nav">
<ul>
<li>Guitarstorage.com</li>
<li>Policies</li>
<li>Contact</li>
</ul>
</div>
<div class="clrflt" id="foot-bot">Content for id "foot-bot" Goes Here</div>

</div>
/body>
</html>
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
background: #E1CC95;
height: 708px;
width: 900px;
position: relative;
margin: 20px auto;
}
#maincontent {

}

#header {
background: url(images/slices/header-bk.jpg) no-repeat;
height: 123px;
width: 900px;
}
#maincontent {

}
#feature {
height: 361px;
width: 707px;
background: url(images/slices/rack-feature.jpg) no-repeat;
text-align: left;
}
#rck_feature {
color: #F6CE6E;
text-decoration: none;
height: 265px;
width: 215px;
margin-top: 80px;
margin-left: 30px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
padding-top: 13px;

}
#buttons3 {
height: 361px;
width: 193px;
background: url(images/slices/buttons3.gif) no-repeat;
position: relative;
}

.link_bullet {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
}

#copy-3 {
background: url(images/slices/3-copy.jpg) no-repeat;
height: 161px;
width: 900px;
}
#bot-nav {
background: url(images/slices/bot-nav.gif) no-repeat;
height: 41px;
width: 900px;
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: F6CE6E;
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
}
#bot-nav ul li {
float: left;
}

#bot-nav ul {
list-style: url(none) none;
float: left;
}

#foot-bot {
background: url(images/slices/foot-bot.jpg);
height: 23px;
width: 900px;
margin: 0px;
padding: 0px;
color: #FFFFFF;
}

#bullet-1 {
height: 12px;
position: absolute;
top: 80px;
color: #0099CC;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
left: 36px;
}

.fltrt {
float: right;
}
.fltlft {
float: left;
}
.clrflt {
clear: both;
}

Tom_Cash

1:29 pm on Oct 31, 2008 (gmt 0)

10+ Year Member



I have a couple of little "cheats" I like to use to solve similar issues.

End the one div and start the next on the same line. It has worked for me with images but I don't know about Divs I'm afraid.

Secondly, set the footer div top margin to -14px, or whatever you need it to. That will pull it up the page.

alt131

6:24 pm on Oct 31, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Nice to see that code again ;)

blueman2, after untangling the code posted up, the worst I could see was a couple of px gap.

That was resolved by making the following adjustments - although these may not be in your original:

1. Corrected the </html> (missing opening < )
2. Ignored @charset "utf-8";
3. Modified:

#bot-nav {
background: url(images/slices/bot-nav.gif) no-repeat;
height: 41px;
width: 900px;
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
/*fix color: F6CE6E; */
color:#f6ce6e;
/*list-style: none; */
text-decoration: none;
margin: 0px;
padding: 0px;
}
#bot-nav ul {
/*list-style: url(none) none;
float: left; */
}
#bot-nav ul li {
float: left;
list-style-type:none;
}

... but none of these things really explain the absence of the gap you reported. ;(

blueman2

2:52 pm on Nov 5, 2008 (gmt 0)

10+ Year Member



Unfortunately I've been able to reproduce the gaps which I think you can now see. The original problem is that "#foot-bot" positions itself to the right of the content in "#bot-nav". The "dive foot-bot does sit immediately below bot-nav at that point. However, in order to clear the float so that foot-bot lines up left with bot-nav, I use "clrflt" on a line break which does move the div foot-bot over but leaves a gap which is probably the line break. Is there some other way to do this or do I have something wrong with the way this is set up. Here's some new code again. Thanks

@charset "utf-8";
body {
margin: 0;
padding: 0;
background: #000000;
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#wrapper {
background: #E1CC95;
height: 708px;
width: 900px;
position: relative;
margin: 20px auto;
}
#maincontent {

}

#header {
background: url(images/slices/header-bk.jpg) no-repeat;
height: 123px;
width: 900px;
}
#maincontent {

}
#feature {
height: 361px;
width: 707px;
background: url(images/slices/rack-feature.jpg) no-repeat;
text-align: left;
}
#rck_feature {
color: #F6CE6E;
text-decoration: none;
height: 265px;
width: 215px;
margin-top: 80px;
margin-left: 30px;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
padding-top: 13px;

}
#buttons3 {
height: 361px;
width: 193px;
background: url(images/slices/buttons3.gif) no-repeat;
position: relative;
}

.link_bullet {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
}

#copy-3 {
background: url(images/slices/3-copy.jpg) no-repeat;
height: 161px;
width: 900px;
}
#bot-nav {
background: url(images/slices/bot-nav.gif) no-repeat;
height: 41px;
width: 900px;
font: bold 14px Verdana, Arial, Helvetica, sans-serif;
color: F6CE6E;
list-style: none;
text-decoration: none;
margin: 0px;
padding: 0px;
overflow: hidden;
display: inline;
}
#bot-nav ul {
float: left;
color: #F6CE6E;
list-style: url(none) none;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#bot-nav ul li {
float: left;
color: #F6CE6E;
list-style: none;
}

#foot-bot {
background: url(images/slices/foot-bot.jpg) no-repeat;
height: 23px;
width: 900px;
margin: 0px;
color: #F6CE6E;
clear: none;
float: none;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
padding: 6px;
}

#bullet-1 {
height: 12px;
position: absolute;
top: 80px;
color: #0099CC;
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
vertical-align: middle;
left: 36px;
}

.fltrt {
float: right;
}
.fltlft {
float: left;
}
.clrflt {
clear: both;
height: 0px;
}

HTML
<!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></title>

<link href="../Saxstorage/sax-style.css" rel="stylesheet" type="text/css" />
</head>
</style>
<body>
<div class="clrflt" id="wrapper">
<div id="header"></div>
<!-- TemplateBeginEditable name="main" -->
<div id="maincontent"></div>
<!-- TemplateEndEditable -->
<div id="bot-nav">
<ul>
<li><snip></li>
<li>Policies</li>
<li>Contact</li>
</ul>
</div>
<br class= "clrflt" />
<div id="foot-bot">A &amp; S Crafted Products</div>
</div>
</body>
</html>

[edited by: swa66 at 9:49 pm (utc) on Nov. 5, 2008]
[edit reason] No peronal URLs, please see forum charter [/edit]

justgowithit

3:22 pm on Nov 5, 2008 (gmt 0)

10+ Year Member



Hi blueman2,

If I understand you correctly (let me know if I'm missing something), you're looking to position #foot-bot below and left of the #bot-nav list, right?

If so, you don't need the <br>. You've declared the width of #foot-bot to be 900px. The content of the block isn't large enough so it's alignin center by default. To fix this just 'align: left' in the #foot-bot declaration.

To clear the list, get rid of the <br> tag and apply 'clear: both' to the #bot-nav declaration.

swa66

9:53 pm on Nov 5, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



When I add a background-color to both your divs, they do touch, so I guess one of them is taller than you think (perhaps due to your background image).

thecarolion

4:15 pm on Feb 3, 2009 (gmt 0)

10+ Year Member



hey swa66,

you just saved me a load of messing around,
thanks & doh

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 10:53 pm May 1, 2026