The following code docks a <h1> element to the left of the navigation and all <a> elements to the right of the navigation. It displays correctly in Internet Explorer 6 on up, but I cannot guarantee anything before that.
HTML:
HTML Code:
<ul class="navigation">
<li><h1>Logo</h1></li>
<li>
<ul>
<li><a href="#bg-1">Link 1</a></li>
<li><a href="#bg-2">Link 2</a></li>
<li><a href="#bg-3">Link 3</a></li>
<li><a href="#bg-4">Link 4</a></li>
</ul>
</li>
</ul>
CSS:
Code:
ul.navigation {
color: #777;
list-style-type: none;
margin: 0;
padding: .75em .25em;
width: 100%;
}
ul.navigation li {
display: inline;
line-height: 2em;
margin: 0;
padding: 0;
}
ul.navigation h1 {display: inline;}
ul.navigation ul {
display: inline;
float: right;
}
ul.navigation a {
color: inherit;
font-size: 1.25em;
padding: 0 .25em;
text-decoration: none;
}
ul.navigation a:hover {color: #0074D9;}
Fiddle: http://codepen.io/anon/pen/VmoxwR
When put through the W3 Validation Service, it is successfully checked as XHTML 1.0 Strict.