Space between <div> tags HELP NEEDED!

mattlowe81 · #1 Apr 7th, 2006, 22:57

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: Select all

<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 · #2 Apr 8th, 2006, 00:35

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 · #3 Apr 8th, 2006, 08:12

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 · #4 Jan 26th, 2007, 10:30

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 · #5 Jan 26th, 2007, 11:35

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

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Title Tags, Meta Tags and SEO - Keyword Density or Keyword Spamming?	pctank	Search Engine Optimization (SEO)	2	Jul 4th, 2008 11:52
alt tags in css	multichild	Web Page Design	1	Feb 24th, 2008 12:35
Tags	acrikey	Webforumz Cafe	28	Jul 12th, 2007 09:20
Help with Tags...	courtjester	Classic ASP	15	Sep 19th, 2004 07:38

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Space between <div> tags HELP NEEDED!