# Gaps beteen div/s help!

**URL:** <https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832>\
**Category:** Uncategorized\
**Created:** [May 20, 2008, 12:30pm UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832 "2008-05-20T12:30:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![samboy](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@samboy](https://forum.kirupa.com/u/samboy)\
**Post date:** [May 20, 2008, 12:30pm UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/1 "2008-05-20T12:30:13Z")

</div>

hi, i’ve been trying to figure this one out for the past 2 days now without any results.

i have a header/content/footer div all good, but once i put text/content in it starts to break apart…making a gap between the div/s. it works how i wanted in IE but it’s not working in firefox.

does anybody know why this is happening?

thanks inadance.

---

<div class="post-metadata">

**Author:** ![thats\_all\_folks](https://avatars.discourse-cdn.com/v4/letter/t/e0b2c6/32.png) [@thats\_all\_folks](https://forum.kirupa.com/u/thats_all_folks)\
**Post date:** [May 20, 2008, 1:07pm UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/2 "2008-05-20T13:07:51Z")

</div>

Do you have a link? Would be easier for us!

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 21, 2008, 1:38pm UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/3 "2008-05-21T13:38:15Z")

</div>

remove any height: ----; definitions.

post a link

---

<div class="post-metadata">

**Author:** ![samboy](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@samboy](https://forum.kirupa.com/u/samboy)\
**Post date:** [May 22, 2008, 2:26am UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/4 "2008-05-22T02:26:58Z")

</div>

Thanks for the reply guys. however the site has not been uploaded yet, still on my machine.

If i remove the height from the div/s then background image within the div/s get cut off. Why is it doing that? Please help!

---

<div class="post-metadata">

**Author:** ![djheru](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/djheru/32/3190_2.png) [@djheru](https://forum.kirupa.com/u/djheru)\
**Post date:** [May 22, 2008, 3:39am UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/5 "2008-05-22T03:39:37Z")

</div>

It could be lots of different things. We need to see the code to figure it out. In the meantime, download the firebug toolbar for firefox. It allows you to explore the structure by mousing over a div and displays the relevant css information. Also, you can change the css on the fly within the browser to instantly see how it affects layout. It is any web designers best friend.

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [May 22, 2008, 4:40pm UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/6 "2008-05-22T16:40:19Z")

</div>

Yea do what djheru suggests

Other than that, if its still on your machine, and you intend to keep it there, we will not be able to help you.

We can’t read minds, especially since HTML & CSS problems can only be fixed if we see your code.

---

<div class="post-metadata">

**Author:** ![samboy](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@samboy](https://forum.kirupa.com/u/samboy)\
**Post date:** [May 23, 2008, 12:45am UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/7 "2008-05-23T00:45:51Z")

</div>

I will post the codes when i get home. Thanks

---

<div class="post-metadata">

**Author:** ![samboy](https://avatars.discourse-cdn.com/v4/letter/s/cdc98d/32.png) [@samboy](https://forum.kirupa.com/u/samboy)\
**Post date:** [May 24, 2008, 9:28am UTC](https://forum.kirupa.com/t/gaps-beteen-div-s-help/260832/8 "2008-05-24T09:28:13Z")

</div>

here are my codes.

\<body\>  
\<div id=“main-nav”\>  
\<ul\>  
\<li\>home\</li\>  
\<li\>about us\</li\>  
\<li\>promotion\</li\>  
\<li\>products\</li\>  
\<li\>links\</li\>  
\<li\>contact\</li\>  
\</ul\>  
\</div\>

\<div id=“container”\>  
\<div id=“flash”\>  
\<p\>some text goes in here\</p\>

\</div\>

\<div id=“quick-links”\>\</div\>  
\<div id=“contents”\>  
\<h1\>SOME TITLE\</h1\>  
\</div\>  
\</div\>  
\<div id=“footer”\>\</div\>  
\</body\>  
\</html\>

CSS

body {  
background-color: #8f8a84;  
margin: 10px;  
font-family:“Lucida Grande”,arial;  
}

#container {  
background-image: url(images/bg.jpg);  
background-repeat: repeat-y;  
width: 832px;  
margin: auto;  
}

a:link { color: #B52C07; }

a:visited { color: #600; }

a:hover, a:active {  
color: #fff;  
background-color: #B52C07;  
}

#main-nav {  
background-image: url(images/main-nav.png);  
background-repeat: no-repeat;  
width: 832px;  
height: 72px;  
margin: auto;  
}

#main-nav ul {  
margin: 0 0 0 40px;  
padding-top: 20px;  
list-style-type: none;  
}

#main-nav li {  
display: inline;  
margin-left: 0px;  
padding: 0 10px;  
}

#main-nav li a {  
text-decoration: none;  
color: #272900;  
}

#main-nav li a:hover {  
text-decoration: none;  
color: #fff;  
background-color: #272900;  
}

#flash {  
width: 800px;  
height: 140px;  
margin-top: 0px;  
margin-left: 15px;  
margin-right: 16px;  
margin-bottom: 10px;  
background-color: #99FF66;

}

#quick-links {  
width: 250px;  
height: 300px;  
background-color: #CC6600;  
float: right;  
margin-right: 20px;  
margin-top: 10px;  
}

#contents {  
width: 500px;  
height: 500px;  
background-color: #3366FF;  
margin-left: 20px;  
margin-right: 20px;  
margin-top: 20px;

}

#footer {  
background-image: url(images/footer.jpg);  
background-repeat: no-repeat;  
width: 832px;  
height: 113px;  
margin: auto;  
}