Question

I’m sure this has been asked before, but I couldn’t find a working solution for my situation.

I am trying to create a header/navigation section for my index page.

The header is 960px wide and 120px tall. Within it is (right now) a single img and a ul with 4 li. I’m trying to position the img and the ul how I want them to appear. I am floating the img left and have assigned it a top margin of 23px to vertically align it how I want — so it’s position is good. The problem arises when I try to position the ul. Depending on the float, clear, margin, or padding settings I apply it will appear vertically below or above the img (as if the image is pushing the ul up or down). The image below shows this happening with the CSS I have pasted below:

Image of problem

This is the relevant HTML code for the header (pretty simple):

<div id="header">
     <img src="_images/header-name2.png" />
     <ul id="navigation">
        <li class="current"><a href="">games</a></li>
        <li><a href="">news</a></li>
        <li><a href="">about</a></li>
        <li><a href="">contact</a></li>            
     </ul>              
</div>

This is the current CSS I have that produces the image above:

body {
   margin-top: 0px;
   font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
   background-image: url(../_images/index-body-bkgd.jpg);
   background-repeat: repeat-x;
   background-color: #333;
}

#wrapper {
   width: 960px;
   margin-top: 0em;
   height: 1050px;
   margin-right: auto;
   margin-left: auto;
}
#header {
   height: 120px;
}
#header img {
   margin-top: 23px;
   float: left;
}
#header ul {
   list-style-type: none;
   padding-left: 430px;
   font-size: 1.3em;
}
#header ul li {
   display: inline;
}
#header ul li a {
   color: #000;
   text-decoration: none;
   padding-top: 10px;
   padding-right: 30px;
   padding-bottom: 10px;
   padding-left: 20px;
}

So, if you extend the top of the image (top pixel in the “d” and “k”) out horizontally, this is where the unordered list sits. If I change the float settings I can make the bottom of the image (which is literally the bottom pixel in the “j”) be the ceiling for the unordered list. Neither is where I want the list to be. How can I liberate the list so that I can position it correctly?

Answer 1

Here is what it looked like before I modified your css

just floating the #header div like so

  #header {
   height: 120px;
   float: left;
}

Moved the nav li right down when I used your code.
After: Here is what is looks like when floating the header div

Sometimes not floating a parent container can cause what seems like strange behavior in the child containers that are floated.