Extend Sidebar with Page Content (5 posts)

  1. EatonFiltration
    Posted 3 years ago #


    I am modifying the twenty-eleven theme but can not figure out how to extend the sidebar since it has a color with the content and I don't want it to end.


    I have seen some other posts but nothing works.

    Also -- the site image -- how do I get that to move all the way to the left?



  2. zex2911
    Posted 3 years ago #

    First of all, you shouldn't modify twenty-eleven theme, when you update theme you will loose all your work on it. Solution for that problem is to create child theme.

    1. Solution for the first problem would be to use Faux Columns (article is a bit old, but that's still the best solution for this problem, as far as i know)

    2. In your style.css, line 79 you have margin on '#branding hgroup' element. Change it to

    #branding hgroup {
    	margin: 0;

    and your image will be moved to the left. Hope that helps. :)

  3. LoneStarPeach
    Posted 3 years ago #

    Not sure if this will work for you but I fixed the length of my site's sidebar by going to the custom.css. Once on the page, I scrolled down to containers, then #main underneath. Your sheet may have something like this (disregard the numeric values):

    #main{width:630px; padding:30px 0; height: 2200px; }

    Adjust the value for height or add height if it's not included. Once you increase the height, your sidebar and its contents will be visable on all post pages no matter the length of your post page's content.

    I am using a WooTheme template.

  4. EatonFiltration
    Posted 3 years ago #

    @Zex2911 Thanks for the help -- still don't really understand the faux columns.

    Would it work if I did an auto command in the height section?

    #main{width:630px; padding:30px 0; height: auto; }

  5. racer x
    Posted 3 years ago #

    Would it work if I did an auto command in the height section?

    Nope. As zex2911 said, it's best to use a faux background.

    The other really good method is to use the negative margin trick. I have used that several times without fail and it requires no background image.

    still don't really understand the faux columns

    You are making one background image that has both the left background color AND the white content background color. It needs to be the full width of both the sidebar and content area but only needs to be as little as 1 pixel tall. Then you simply repeat that image behind the wrapper that holds your sidebar and content columns.

Topic Closed

This topic has been closed to new replies.

About this Topic