Question

I trying to come up with a simple css layout which should look like this:

This is my html code for the header and nav bar:

<div id="header">
<h1>LOGO</h1>
<ul>
<li><a href= ""> Home </a></li>
<li><a href= ""> Logout </a></li>
</ul>
</div>

<div id="navigation">
<ul>
    <li><a href="">Home</a></li> 
    <li><a href="">Help</a>
    <li><a href="">Contact Us</a>
    <li><a href="">Customers</a> 

</div>

And I’m already doing some styling on the navigation bar, however I’d like to be able to keep the two links within the header right aligned and the logo image left aligned.
When I try to edit those links in the header, it all gets messed up because I’m confused about how to differentiate between the navigation list items and header list items.
Could someone please help me with the header positioning?

Answer 1

In the header, you need to float the h1 left, and the ul right, and then add display: inline to your links (to keep them on the same line).

To target the list items in the header, you can simply use a parent selector, like this: #header li.

Here’s what you need:

#header {
    border: 1px solid #ccc;
    overflow: hidden; /* clearfix */
}
#header h1 {
    float: left;
}
#header ul {
    float: right;
}
#header li {
    display: inline;
}

See DEMO.