Reputation: 970

CSS - Positioning Div's

I've got three div's I'm working with: main, which is a container for the other two, header which consists only of an image for now, and navigation which has some links. Right now I'm having trouble positioning the navigation div directly under the header div, there's always one line of the main div in between them. Any suggestions on how to go about doing this?

HTML:

<html>
<head>
   <link rel="stylesheet" type="text/css" href="style.css" />
   <title></title>
</head>

<body>
   <div class="main">

      <div class="header">
         <img src="images/logo.jpg" />
      </div>

      <div class="navigation"><ul id = "linkbar">
         <li><a href="">Home</a></li>
         <li><a href="">Guestbook</a></li>
         <li><a href="">Contact</a></li>
         <li><a href="">Quotes</a></li>
         <li><a href="">Links</a></li></ul>
      </div>
   </div>

</body>

</html>

CSS:

body {
   background-color: gray;

   margin:0px;
   padding:0px;

}

.header {
   background-color:white;
} 

.main {
   background-color: yellow;
   text-align: center;
   width: 900px;
   margin: auto;
}
   a:link {color:white; text-decoration:none;}      /* unvisited link */
   a:visited {color:white; text-decoration:none;}  /* visited link */
   a:hover {color:red; text-decoration:underline;}  /* mouse over link*/
   a:active {color:red; text-decoration:underline;}  /* selected link */

.navigation {
   text-align: center;
   background-color: f8901f;   
}

#linkbar li {
  margin: 0px 20px 0px 20px;
  padding: 11px 0px 10px 0px; 
  list-style-type: none;
  display: inline;
  line-height: 2.5em;
}

Upvotes: 0