Changing sidebar width in 3-column set up

Community Forums Forums Design Tips and Tricks Changing sidebar width in 3-column set up

This topic is: not resolved

This topic contains 3 replies, has 3 voices, and was last updated by  mbhunter 1 year, 11 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #8933

    chantal2012
    Participant
    Post count: 60

    I’m having a hard time changing the width of the left sidebar at http://yvesrobichaud.com.  I want to widen the left sidebar and make the right sidebar narrower.  I played around with the following code but everything seems to get all screwed up so I changed it back to the original:

    .sidebar {
     background: #f5f5f5;
     display: inline;
     float: right;
     margin: 0 0 20px;
     padding: 15px 15px 5px;
     width: 250px;
    }

    #sidebar-alt {
     background: #f5f5f5;
     float: left;
     padding: 15px 15px 5px;
     width: 120px;

    I wanted to make each sidebar the same width so I tried changing the width for both to 185px and like I said it screwed everything up.  What am I missing?

    #8948

    Chris Cree
    Participant
    Post count: 147

    You were on the right track. But you also need to also adjust the width of the #content-sidebar-wrap so that it fits beside the #sidebar-alt.

    Make the changes like you did. Then add width: 685px; to the css property below (about line 651 in your style sheet).

    [css].sidebar-content-sidebar #content-sidebar-wrap,
    .sidebar-sidebar-content #content-sidebar-wrap {
    float: right;
    width: 685px;
    }[/css]


    #8973

    chantal2012
    Participant
    Post count: 60

    Thanks Chris!  That worked perfectly!  My skills in CSS are quite limited…I’m trying to learn but I get stuck sometimes…can you explain to me why this had to be changed?

    Everyone keeps saying “use Firebug”, but I find it tricky to learn :( .  I should just take a full blown CSS course!!!

    #13038

    mbhunter
    Participant
    Post count: 3

    I’m still learning this as well but I think the idea with the id selectors like #content-sidebar-wrap are to provide containers for the nested elements to “run into” when they float.

    The .sidebar and #sidebar-alt have fixed widths, but they also float, so their positions are relative to the containing elements: the wrappers. If these wrappers aren’t sized correctly relative to the elements they’re containing, then they’ll float too far, or not far enough. So, you adjusted the size of the appropriate container with Chris’ suggestion.


Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.