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/
