J.E., > I'm trying to create a page header that should look like this > > [...] > > In other words I don't understand how to get the menu to move to > the right. The HTML code looks like this: > > <div id="page"> > <div id="pagetop"> > Page header > <ul class="sectionlist"> > <li>Main</li> > <li>About</li> > <li>Blog</li> > <li>Research</li> > <li>Photo</li> > <li>Code</li> > </ul> > </div> > > > And the relevant parts of the CSS > > #page > { > background-color: #fff; > padding: 2px; > margin: auto; > width:900px; > } > > #pagetop > { > background-color: #9F9; > padding: 2px 4px; > } > > .sectionlist > { > display: inline; > list-style: none; > } > > .sectionlist li > { > border-left: 2px solid #fff; > display: inline; > padding: 3px 10px; > } > > I would be grateful if anyone could give me a hint of how to > achieve this. Among other things I've tried using float but that > makes a mess of things ... I'm sure there is a really simple > solution to this but I can't figure it out. You can float the UL to the right, but you'd have to put it above the other content of that div. So:
<div id="page"> <div id="pagetop"> <ul class="sectionlist"> <li>Main</li> <li>About</li> <li>Blog</li> <li>Research</li> <li>Photo</li> <li>Code</li> </ul> Page header </div> with .sectionlist { float: right; display: inline; list-style: none; } HTH, Rick. ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/