WordPress.org

Ready to get started?Download WordPress

Forums

SIdebar issue (6 posts)

  1. offthebench
    Member
    Posted 3 years ago #

    I'm trying to widen the sidebar at the right of my page to accommodate an image sized 300x250 and I can't figure it out. I'm not experienced in CSS but I'm good at following instructions. Please Help

    Here is a link to my site:

    http://maxfrankel.com/

    Thanks

  2. iainasmith
    Member
    Posted 3 years ago #

    Hello, you need to do one of two things, both with the CSS...

    1. you need to find the lines in the CSS

    #branding, #main, #wrapper {
    margin: 0 auto;
    width: 940px;
    }
    and change the width to say 1040px; depending on how the CSS is built might make the side bar fit, if it does great if not then you need to give the width of the sidebar div or class 300px;

    This will increase the over all size of the page, your header might look a bit funny if you do this.

    The second option is to reduce the size of the content area on the left to enable the sidebar to be increased, keeping the width of the page the same.

    Have you goe firefox? if so get firebug to inspect the elements on the page, really handy and you can change sizes on there as a preview before going completely live.

  3. iainasmith
    Member
    Posted 3 years ago #

    #primary, #secondary {
    float: right;
    overflow: hidden;
    width: 220px;
    }

    Just seen this line as well in the code, the width will need to be expanded to 300px;

  4. coopersita
    Member
    Posted 3 years ago #

    Just change the width of #container, and #primary. You need to change both to something like this (you'll have to put correct numbers, I'm just guessing):

    #container {
        float: left;
        margin: 0;
        width: 750px;
    }
    #primary {
        float: right;
        width: 330px;
    }
  5. offthebench
    Member
    Posted 3 years ago #

    What everyone has suggested has worked great but there's still another problem. When I make the sidebar bigger (anything larger than 220px) the entire sidebar moves to the bottom of the page. How do I make it bigger but keep it where it is? Help please

  6. iainasmith
    Member
    Posted 3 years ago #

    That is happening because your adding width to the sidebar that overflows the width of the wrapper when combined with the main content area on the left.

    For example width = 960px
    content area = 660px
    sidebar = 300px

    content + sidebar = 960px;
    Great fits but if you add any padding or margin to either will be inclulded in the final sum pushing the side bar down

    For example width = 960px
    content area = 660px + 10 padding = 670
    sidebar = 300px

    content + sidebar = 970px; - 10px over the wrapper width, this will push the side bar under the main. you will need to reduce the width of the content to 650 or less.

    Hope that helps.

Topic Closed

This topic has been closed to new replies.

About this Topic