Space between <div> tags HELP NEEDED!

mattlowe81 · April 7th, 2006, 07:57 PM

Good day everyone!

I’m a CSS newbie having recently moved from HTML table layouts to CSS layouts with XHTML <div> tags – better late than never!

I’m now experiencing a problem with vertical space between two <div> tags and it’s driving me up the wall (I’m one step away from tearing my hair out).

I’ve browsed the Internet for the last few days and have yet to find a solution that works for me. I’d be extremely grateful if anyone could have a look at my code and tell me if they know what I’m doing wrong and how to fix it.

Here goes.

I have a cantered container division on my page and two divisions inside the container – one division called “header” (that contains a header image background as well as the company logo) and another division called “content” (that contains a repeated background). My problem is that there is a large gap between the header and content <div>s and I need the two <div>s to meet with no space, as the backgrounds join together to complete an image.

Here’s my XHTML code:

Code:

<body>
   <!-- Begin Container -->
   <div id="container">

     <!-- Begin Header -->
     <div id="header">
         <img src="images/logo.gif" width="278" height="169" alt="" /></div>
       <!-- End Header -->

       <!-- SPACE APPEARS HERE!! -->

       <!-- Begin Content -->
       <div id="content">
         <h5>Content Here</h5>
       </div>
       <!-- End Content -->

   </div>
   <!-- End Container -->
 </body>

And here’s the CSS code:

[/code]body
{
margin: 0px;
border:0;
padding: 0px;
background-color: #E6F0F5;
}

#container
{
width: 800px;
background-color:#FF0000;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}

#header
{
width:800px;
height:309px;
background: url(../images/bgHeader.gif) no-repeat;
padding: 20px 0px 0px 26px;
margin:0px;
}

#content
{
width: 800px;
padding: 0px 0px 0px 0px;
background: url(../images/bgContent.gif) repeat-y;
margin:0px;
}[/code]

I've attached a screen shot (from Netscape 8.0) to illustrate the problem - the red is the background and represents the space I want to remove.

I hope I've explained my problem clearly. Again, I'd be very grateful if anybody can help me out.

Thanks in advance

Matt

herkalees · April 7th, 2006, 09:35 PM

From what I can see, nothing should be broken...

Try removing that <h5> in your content div.

If that doesn't do anything, give us 100% of your xhtml and CSS, or just post a link, we'll figure it out.

mattlowe81 · April 8th, 2006, 05:12 AM

Hi Herkalees

Many thanks for looking through my code and helping me out... YOU'VE FIGURED OUT MY PROBLEM:-)

When I removed the unstyled header tag from the content <div> the unwanted space was removed. When plain unstyled text was then inserted in the content <div> the unwanted space didn't return either. The unwanted space only reappears when I insert an unstyled header as the VERY FIRST element in the content <div>. I've now styled a header tag (setting the margin and padding properties to "0") and these can now be inserted as the VERY FIRST element in the content <div> without causing the unwanted space to return.

So problem solved? Do you believe I'm correct in thinking that the default margin and padding properties of the header tag were causing the unwanted space?

Many thanks again!

Moonlilly · January 26th, 2007, 07:30 AM

I have the EXACT same problem, but I don't have any H tags! If someone could help me out, that would be awsome, as I am on the verge of going bald myself!! Lol. Here is my code:

<title>Index - Atelier du Druide</title>
<style type="text/css">

</style>
</head>
<body alink="#FFFFFF">

<div align="center" id="Header"></div>

<div align="center" id="Center1"></div>

<div align="center" id="Center2">
<p align="center"><font color="#000000"><font face="Arial">Some text</font> </font> <BR>
<p align="center"> <font color="#000000">Some more text</font>
<p align="center">
<p align="center"><b><font face="Arial" size="4"><u><a href="Accueil.htm">Français</a></u>                <u><a href="Home.htm">English</a></u></font></b></div>

<div align="center" id="Footer">
</div>

</body>
</html>

Moonlilly · January 26th, 2007, 08:35 AM

Ok, never mind... I just fixed the problem TOTTALY by FLUKE!!! I am using DW8, and I decided, just for fun, to set the Center 2 div tag to Overflow: hidden. And it worked!!! Yippee!!!

aframe · April 2nd, 2009, 12:56 AM

I am having a similar problem, my website displays fine in IE, but not in ff or safari. there is a gap between navbar and main, and main and footer div tags. I know the culprit is <p> but it shouldn't be and I am trying to figure out a workaround. Do i need to add another div tag?, if so where. Thanks in advance for the help. the website is www.jjremodelers.com, below is my css.

body {
font-size: 12px;
background-image: url(Images/powerpoint-bkgd.jpg);
background-repeat: repeat;
}
#header {
height: 190px;
width: 800px;
}
#navbartop {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url(Images/navbar-bkgd.png);
background-repeat: no-repeat;
height: 26px;
width: 800px;
margin: 0px;
padding: 0px;
}
#main {
background-image: url(Images/main-bckgd.png);
background-repeat: repeat-y;
height: auto;
width: 800px;
text-indent: 35px;
margin: 0px;
padding: 0px;
}
h1, h2, h3, h4, h5 {
font-family: Verdana, Arial, Helvetica, sans-serif;
}
h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
font-weight: bold;
color: #333333;
text-indent: 0px;
}
h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1.2em;
font-weight: bold;
color: #649D35;
text-indent: 0px;
}
#footer {
background-image: url(Images/footer.png);
background-repeat: no-repeat;
height: 85px;
width: 800px;
margin: 0px;
padding: 0px;
}
#main p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
padding-right: 35px;
padding-left: 35px;
}
#wrapper {
width: 800px;
margin-top: 15px;
margin-right: auto;
margin-left: auto;
}
.navbarimage {
display: inline;
padding-top: 3px;
padding-right: 4px;
padding-left: 4px;
}
.footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: .8em;
text-align: center;
}

Moonlilly · April 2nd, 2009, 01:47 PM

Don't ask me why this works, but try adding a 1px padding to your footer instead of 0, like this:

#footer {
background-image: url(Images/footer.png);
background-repeat: no-repeat;
height: 85px;
width: 800px;
margin: 0px;
padding: 1px;
}

Works on my screen anyway, hope it works for you too

snelll · April 2nd, 2009, 06:53 PM

On the footer paragraph do: margin: 0;.

Actually add this to your CSS file:

Code:

* {
margin: 0;
}

Prez · August 24th, 2009, 08:22 PM

Quote:

Originally Posted by snelll

On the footer paragraph do: margin: 0;.

Actually add this to your CSS file:

Code:

* {
margin: 0;
}

Perfect! (and so simple too)

After adding various versions of Margin = 0, Padding = 0, Border = 0, deleting my headings, adding Margin = 1 etc, etc, I just posted that tiny bit of code to the top of my CSS style sheet, and like magic, the space was gone!

Thankyou very much Snell!