Can't put header and navigation next to each other

I'm trying to put my navigation bar next to the header, but it's forcing the header on top of the navigation. If you don't know what I mean, this is how I want the header and navigation menu to be laid out: Snow Candy <-

This is the HTML that I've got:

<div id="header">
<h1>Logo</h1>
<ul id="nav">

<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
开发者_运维知识库<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>

</ul></div>
<div id="content">
<h1>Header One</h1>
</div>

This is the CSS I've got:

body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}

#header{
float: right;
}


ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #3C7DC4;
text-decoration: none;
font-size: 25px;
}

li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #FF8F00;
}

#content{
background: #FF8F00;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
border-style:solid;
border-width:10px;
border-color: #121212;
min-height: 200px;
vertical-align: bottom;
}

Ok, Henry.

I added some code into the css - http://jsfiddle.net/JET4v/2/

Also added wrapper to keep it all in control.

• This basically says that there wont be anything beside #header and #content
• Also #header #header h1 #header #nav #content will all be floated to the left.

• And #wrap basically centers itself.

  #wrap { margin: 0 auto; width: 700px; }
  #header,
  #content{ clear: both; }
  
  #header,
  #header h1,
  #header #nav { float: left; }
  

Note that you might want to add width and height values too, but not height to the #content of course.

And if you want to use #wrap you should know that it should be the width of your widest element(s)