HTML Forum

**nineball537** · 02-19-2010, 01:45 AM

Both my css and html check out on the w3 validator, yet I am having trouble with a vertical gap (about 15 px in height) between my "navigation" div and "body" div (and, most likely, the same problem will occur when I get to working on my "footer" div).

This has happened to me a number of times before, and I usually just set up a negative margin (though it's something I do not want to do again). Is there a way to fix this problem without any "hacks" or negative margins?

Here's my HTML code:

Code:

<?xml version="1.0" encoding="utf-8"?>
<!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>
   <link rel="stylesheet" type="text/css" href="styles.css" />
   <title>Title</title>
</head>

<body>
   <div class="container">
      <div class="header">
         <img src="images/header.png" width="800" height="150" alt="Header" title="Header" />
      </div>
      <div class="navigation">
         <div class="navbar">
            <div class="navlink"><a href="index.html">Home</a></div>
            <div class="navlink"><a href="updates.html">Updates</a></div>
            <div class="navlink"><a href="inventory.html">Inventory</a></div>
            <div class="navlink"><a href="contact.html">Contact</a></div>
         </div>
      </div>
      <div class="body">
         <div class="motto">
            <h1>Motto</h1>
         </div>
         <div class="content">
            <p>Testing. Testing. Testing.</p>
         </div>
      </div>
      <div class="footer">
         <p>Testing. Testing. Testing.</p>
      </div>
   </div>
</body>

</html>

And here's my CSS code:

Code:

body {
   font-family: arial, sans-serif;
   background-color: #1a6dea;
}

.container {
   width: 950px;
   margin-left: auto;
   margin-right: auto;
}

.header {
   width: 800px;
   height: 150px;
   margin-top: 25px;
   margin-left: auto;
   margin-right: auto;
}

.navigation {
   width: 950px;
   height: 100px;
   background-color: #fbfbfb;
}

.navbar {
   width: 800px;
   margin-top: 50px;
   margin-left: auto;
   margin-right: auto;
}

.navlink {
   width: 150px;
   float: left;
   position: relative;
   margin-left: 25px;
   margin-right: 25px;
   text-align: center;
}

.navlink a:link, a:active, a:visited {
   display: block;
   font-size: 30px;
   color: #333333;
   text-decoration: none;
}

.navlink a:hover {
   display: block;
   text-align: center;
   font-size: 30px;
   color: #de431f;
   text-decoration: none;
}

.body {
   width: 950px;
   background-color: #fbfbfb;
}

/*-----------------------------CLEARFIX-----------------------------*/

/* thanks to perishable press (http://perishablepress.com/) for this great clearfix method */

.navigation:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.navigation {
	display: inline-block;
}

Thanks in advance.

**YoshiGoneMad** · 02-19-2010, 02:36 AM

Add this to your .css

Code:

h1
{
margin:0;
padding:0;
}

By default, margins are added to headings. Hope that helps.

**orionoreo** · 02-19-2010, 12:58 PM

i start my css

Code:

* {
margin: 0px;
padding: 0px;
}

**nineball537** · 02-21-2010, 01:27 AM

Margins are a pain ... However, in this case, I found they were completely unrelated. When I fudged with my clearfix method, the problem straightened itself out. Darn divs.

Thanks for the help, fellas.

**jeck143** · 02-24-2010, 07:04 AM

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).

HTML Forum

Find a Professional HTML Freelancer!

FREE Outsourcing eBook!