SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Center between left and right float

    Hi

    You will have to be patient with me as I am just learning CSS and how it all goes together.

    What I am trying to do is to have a

    left center right

    text elements on page.

    I have managed to get the left and center okay but the right text seems to drop a line.

    Here is the CSS code

    ul#navlist
    {
    padding: 0;
    margin: 0;
    list-style-type: none;
    width: 100%;
    }

    ul#navlist li { display: inline; }

    ul#navlist .left
    {
    float: left;
    width: 5em;
    }

    ul#navlist .center
    {
    margin:auto;
    text-align:center
    }

    ul#navlist .right
    {
    float: right;
    width: 5em;
    }

    and here is the html

    <body>
    <ul id="navlist">
    <li class="left">Item one</li>
    <li class="center">Item two</li>
    <li class="right">Item three</li>
    </ul>
    </body>

    I've been all over the web and I'm beginning to wonder if what I am trying to achieve is at all possible.

    Any and all help would be greatly appreciated.

  2. #2
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    have you tried:

    <ul id="navlist">
    <li class="left">Item one</li>
    <li class="right">Item three</li>
    <li class="center">Item two</li>
    </ul>

    sometimes the order you put the class="left,center,right" matters

  3. #3
    SitePoint Member
    Join Date
    Sep 2005
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Blimey that was fast.

    And yes it has worked, thank you very much.

    Much appreciated

  4. #4
    SitePoint Addict
    Join Date
    Feb 2008
    Location
    New Jersey, USA
    Posts
    374
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no problem


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •