Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I can't center the whole wrapper because of the sidebar

    Heres my CSS

    Code:
    #wrap { float:left; padding:0; margin-top:40px; margin-bottom:16px; }
    .description { line-height:18px; float:left; width:162px; padding: 12px 14px 14px 14px; margin-bottom:20px; border: 1px solid {color:Border}; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; background-color: rgba(255,255,255,0.90); border-bottom: 1px solid {color:Border Shadow};}
    
    .navbar {list-style:none;width:350px; margin-bottom:20px; border: 1px solid {color:Border}; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px; background-color: rgba(255,255,255,0.90); padding:3px 0; border-bottom: 1px solid {color:Border Shadow}; }
    
    .outerbox {float:left; width:504px; margin:0 0 10px 0; padding: 0; }
    .outerbox-nav {float:right; width:192px; margin:0 0 10px 30px; }
    then the HTML

    Code:
    <div id="wrap">
    
      <div class="outerbox-nav">
        <div class="navbar">
    sidebar contents here
    </div>
    </div>
    
    
      <div class="outerbox">
    ANYTHING in the main content is here..
    </div>
    
    </div>
    BTW my sidebar is placed on the right...
    here is my site so you can take alook
    http://memesunlimited.tumblr.com/

    When I change the size of my sidebar, the whole content doesn't move. Thus making the wrapper not center. The only thing that moves is the sidebar not the whole wrapper. It makes it not equal to the sides. Any help on how I can resize my sidebar while the whole thing is centered? Thanks~

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    See screenshot.
    The specified width of the main div (.outerbox) is not wide enough to contain its content; this is likely to be an issue. Increase this width to more than 534 pixels.

    The pictures are nested four-levels deep within divs, each with a specific width. You don't need this level of divs - one would probably do!

    Try not to be so specific with the widths. Specify a main outer width and let the content take care of itself - you can always use margins to push things further in from the sides.

    Similarly for your sidebar: you've specified a width for .outerbox-nav and the same width for .navbar - you don't need to specify this 2nd width.

    You need to be careful with widths, particularly with floats. If the combined widths of contained elements in greater than its container than floats, in particular, will misbehave - or even drop out of position (float drop).

    So: increase the width of the main div and try removing the widths that you have specified for some of the inner elements. And, if possible, reduce the number of nested divs.
    Attached Thumbnails Attached Thumbnails I can't center the whole wrapper because of the sidebar-image-11.jpg  
    Last edited by AndrewGSW; 08-09-2012 at 10:05 PM.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    .. and your sidebar has a left margin of 30px, so change this if you are changing the width of the sidebar.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #4
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Whenever I do extend the wrapper size to 1100, some of the contents get messed up... :/

  • #5
    New to the CF scene
    Join Date
    Aug 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This happens...


  •  

    Posting Permissions

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