CSS: Trouble Controlling Header Layout (ul, img)

I'm sure this has been asked before, but I couldn't find a working solution for my situati开发者_运维知识库on.

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?

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.

If you position the #header relatively, you can absolutely position the <ul> and <img /> within the header:

#header {
   height: 120px;
   position: relative;
}

#header img {
   margin-top: 23px;
   position: absolute;
   top: 23px;
   left: 0;
}

#header ul {
   list-style-type: none;
   font-size: 1.3em;
   position: absolute;
   top: 0;
   right: 0;
}

To make this work for you, simply change the values for top and bottom, depending on where you want the image and unordered list to appear within your header.

This technique of Absolute Positioning Inside Relative Positioning is described in more detail at CSS-Tricks (see screenshot below).

A page element with relative positioning gives you the control to absolutely position children elements inside of it.