SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problems centering container

    I'm struggling with centering my main container, although that is maybe not the right description, because it's more an optical problem. I have a simple two column site: left #sidebar(menu), right #content. The container has a fixed width of 960px; The problem I have is with the sidebar. The sidebar has a fixed width of 300px ( since I don't know the width of the widest menu item.) and the menu items have the property text-align: right; So although the container is centered, because of the right alignment of the menu items in the fixed width sidebar, it looks like it's not. What would be the best solution in this case? Shoud I not set a width for the sidebar?

    thank you in advance
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding this to container's css:
    Code:
    position: relative; left: 150px;
    and similar to css to sidebar. It would shift both blocks to 150 pixels (half of sidebar's width) to the right, making it look centered.

    Then add min-width: 1260px; (combined width of content and sidebar) to body to avoid content going outside of browser window.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response. That doesn't seem to work. It was the left side that optical is bigger, so I tried it with left: -150px; but than the container is to much to the left instead, which is not longer optical.
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    It would be easier if we could see the design but your first suggestion of not setting a width should allow the menu to sit on the left but allow items to be right aligned with the longest item.

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. You can find the layout as I now have it here

    In this example I have no width for the menu column(left) but was forced to set a width for the right column. If I didn't set a width it was wrapping left under the menu?

    What is in your opinion the best solution for this?

    Thank you in advance;
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6
    Forums Designer
    Join Date
    Jun 2004
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Remove float and width from #content, but add margin-left: 160px;

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by CyberAlien View Post
    Remove float and width from #content, but add margin-left: 160px;
    That works until the last paragraph from content which wraps under the menu!


    Edit sorry, my wrong that is indeed working and the best solution so far, thanks
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Looks ok to me now

  9. #9
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    2,097
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Looks ok to me now
    It is indeed okay now. Thanks all for the input!
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)


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
  •