Question

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;
}

Answer 1

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)