[css-d] Moving stuff to the right ?

[Jan Erik Moström]

I'm trying to create a page header that should look like this

----------------------------------------------------------------------
| Page Header                        | Main | About | Blog | 
...     |
----------------------------------------------------------------------

But I always end up with

----------------------------------------------------------------------
| Page Header   | Main | About | Blog | 
...                          |
----------------------------------------------------------------------

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.


                 jem
______________________________________________________________________
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/