Twenty Eleven – Sidebar width explained and 2 bonus layouts

I’ve had many questions on how to change the width of the sidebar in Twenty Eleven, I’m going to show how it can be done for both left and right sidebar layouts. My last post on this was a bit confusing, I’ll try to explain it as best I can.

First lets take a look at the layout, it’s easier to understand what you’re doing when you understand the way things work.

There are 3 main sections to the layout
#primary – The area the content and sidebar reside in.
#content – Your post content.
#secondary – The sidebar.

Here’s the CSS for the default right sidebar layout.

#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 58.4%;
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 18.8%;
}

Think of the #primary as a box, and inside there are two smaller boxes that fit perfectly. If you were to make one box bigger, the other box will have to get smaller. Here is an image that might help visualize the layout.

twenty-eleven-layout-3d

The content is 58.4% wide, the sidebar is 18.8% wide. There is also a 7.6% margin on the left and right of the content, and on the right side of the sidebar. Add this all up 58.4 + 18.8 + 7.6 + 7.6 + 7.6 = 100% These cannot add up to more than 100 or the sidebar and content won’t fit together within the #primary area.

Twenty-Eleven-layouts

If we increase the sidebar by 5%, we need to take 5% away from something, it could be from the #content width, or from the margins.

Ok enough explaining, take a look at the code below and compare it to the code above. I’ve increased the sidebar by 5%. I had to adjust 3 areas, the sidebar width, the content width, and the #primary margin to allow for the wider sidebar

#primary {
	float: left;
	margin: 0 -31.4% 0 0; /* incresed margin by 5% */
	width: 100%;
}
#content {
	margin: 0 34% 0 7.6%;
	width: 53.4%; /* decreased width by 5% */
}
#secondary {
	float: right;
	margin-right: 7.6%;
	width: 23.8%; /* increased width by 5% */
}

The left sidebar layout is pretty much the same only backwards for the #primary margin. Here’s the original CSS for it.

.left-sidebar #primary {
	float: right;
	margin: 0 0 0 -26.4%;
	width: 100%;
}
.left-sidebar #content {
	margin: 0 7.6% 0 34%;
	width: 58.4%;
}
.left-sidebar #secondary {
	float: left;
	margin-left: 7.6%;
	margin-right: 0;
	width: 18.8%;
}

Here it is with a 5% increase to the sidebar

.left-sidebar #primary {
	float: right;
	margin: 0 0 0 -31.4%; /* increased margin by 5% */
	width: 100%;
}
.left-sidebar #content {
	margin: 0 7.6% 0 34%;
	width: 53.4%; /* decreased content by 5% */
}
.left-sidebar #secondary {
	float: left;
	margin-left: 7.6%;
	margin-right: 0;
	width: 23.8%; /* increased sidebar width by 5% */
}

You don’t have to take the width from the #content either, you can remove it from the margins instead then your content size will stay the same. If you’re using NomNom theme, you’ll need to add the extra sidebar to this, use #extra-sidebar class with the #secondary, EX: .left-sidebar #secondary, .left-sidebar #extra-sidebar {}

BONUS: Smaller Margin Layouts

Twenty Eleven theme contains alot of large margins which reduces your content area. I never cared much for this so here’s an easy way to reduce some of it by 3% on each side, and make better use of your precious content area.

The content and sidebar both have a margin of 7.6%, that’s 7.6% x 3= 22.8% of the area in your theme is wasted! The site title, search and menu div also share these same margins. So to use some of this space all I did was reduce each margin by 3%, then add the 3% back to the width of the content and sidebar, so you have 6% more content showing on your site and it still looks nice.

I’m not going to explain in detail, but you should be able to figure it out if you’ve stuck through this post.

(I’ve added NomNoms extra sidebar class in it as well)

#branding hgroup {
    margin: 0 4.6%; /* decreased by 3% */
}
#branding #searchform {
    right: 4.6%; /* decreased by 3% */
}
#access div {
    margin: 0 4.6%; /* decreased by 3% */
}
#content {
    margin: 0 34% 0 4.6%; /* decreased by 3% */
    width: 61.4%; /* increased by 3% */
}
#secondary, #extra-sidebar {
    margin-right: 4.6%; /* decreased by 3% */
    width: 21.8%; /* increased by 3% */
}

This is for the left sidebar layout

#branding hgroup {
    margin: 0 4.6%; /* decreased by 3% */
}
#branding #searchform {
    right: 4.6%; /* decreased by 3% */
}
#access div {
    margin: 0 4.6%; /* decreased by 3% */
}
.left-sidebar #secondary,
.left-sidebar #extra-sidebar{
    margin-left: 4.6%; /* decreased by 3% */
    width: 21.8%; /* increased by 3% */
}
.left-sidebar #content {
    margin: 0 4.6% 0 34%; /*decreased by 4% */
    width: 61.4%; /* increased by 4% */
}

65 thoughts on “Twenty Eleven – Sidebar width explained and 2 bonus layouts

  1. Dagny Kight

    THANK YOU THANK YOU THANK YOU!! It was so hard to find this on the WordPress site. The moderators won’t stop sniping at people to use child themes or to stop “interrupting” somebody’s thread by asking the SAME question!

  2. Carol

    This was very helpful–to a point. I needed to increase the sidebar size so that a Facebook like box with faces, 292 px, would fit. Now it fits, but it’s moved down much lower on the page leaving a big gap on the top left. What to do?

    This is my modified sidebar.

    /* Right Content */
    .left-sidebar #primary {
    	float: right;
    	margin: 0 0 0 -26.4%;
    	width: 100%;
    }
    .left-sidebar #content {
    	margin: 0 7.6% 0 34%;
    	width: 58.4%;
    }
    .left-sidebar #secondary {
    	float: left;
    	margin-left: 2.4%;
    	margin-right: 0;
    	width: 29.2%;
    }

    Thanks, Carol

    1. Zeaks

      Hi Carol, looks like you’ve only changed the width of the sidebar but didn’t adjust the other areas. (this is actually what the post was about)

      Take a look at this code and notice the 3 areas you need to adjust to reflect the new sidebar width. Originally the sidebar width is 18.8%, since you’re increasing that to 29.2% the difference is 10.4%. Each section needs to be adjusted to reflect that in order to make room for the wider sidebar.

      .left-sidebar #primary {
          float: right;
          margin: 0 0 0 -37.8%; /* increased margin by 10.4% */
          width: 100%;
      }
      .left-sidebar #content {
          margin: 0 7.6% 0 34%;
          width: 48%; /* decreased content by 10.4% */
      }
      .left-sidebar #secondary {
          float: left;
          margin-left: 7.6%;
          margin-right: 0;
          width: 29.2%; /* increased sidebar width by 10.4% */
      }

      Let me know how that works out for you

      1. Carol

        I guess the situation was corrected somewhat, but now the sidebar and content overlaps with the main content. I’ll try to think about this and figure it out, but I’m still confused. I am very grateful for the help! Thanks.

  3. Zeaks

    Try this, for the content section increase the margin

    .left-sidebar #content {
        margin: 0 7.6% 0 44.4%; /****** change to 44.4%***** */
        width: 48%; /* decreased content by 10.4% */
    }

    That should fix it up. If you want to bring things closer to the edges of the page, you can change the 7.6% margins to something like 3.6% as well, that will give you a bit of room, then increase the width of the sidebar by 4% and the content by 4%.

    Once you get the hang of how it works, it’s pretty easy.

    1. Carol

      Thank you. It worked! I do think I understand it better now, and yes, I might try tweaking the margins some more. But it looks so much better now, and that Facebook feed is important to us. You have been a great help to this little volunteer.

  4. Kerry

    Thanks for the great article on sidebars and margins in Word press 2011. I’ve had a bit of a play and had success in following you examples but have been unable to achieve my goal properly.
    I’m want to increase my right hand side bar to 300px whilst trying to keep as much content area as possible and robbing the margins, which I think would mean something like :
    content width 60%
    Sidebar 30%
    Left of content 3%
    Right of content 4%
    Right of sidebar 3%

    I am still a bit confused as to what to change, as I can only grasp half of the concept.
    Sorry for being a bit dense, Is it possible to help me? Thanks

  5. Hozey

    This is great. Thanks for sharing. I’ve made the following changes, but can’t get the left sidebar to decrease in width.

    19 Reduce Left Side Margin
    #branding hgroup {
         margin: 0 4.6%; /* decreased by 3% */
    }
    #branding #searchform {
         right: 4.6%; /* decreased by 3% */
    }
    #access div {
         margin: 0 4.6%; /* decreased by 3% */
    }
    .left-sidebar #secondary,
    .left-sidebar #extra-sidebar{
         margin-left: 4.6%; /* decreased by 3% */
         width: 21.8%; /* increased by 3% */
    }
    .left-sidebar #content {
         margin: 0 4.6% 0 34%; /*decreased by 4% */
         width: 61.4%; /* increased by 4% */
    }

    20 Reduce Right Side Margin
    #branding hgroup {
         margin: 0 4.6%; /* decreased by 3% */
    }
    #branding #searchform {
         right: 4.6%; /* decreased by 3% */
    }
    #access div {
         margin: 0 4.6%; /* decreased by 3% */
    }
    #content {
         margin: 0 34% 0 4.6%; /* decreased by 3% */
         width: 61.4%; /* increased by 3% */
    }
    #secondary, #extra-sidebar {
         margin-right: 4.6%; /* decreased by 3% */
         width: 21.8%; /* increased by 3% */
    }

    21 Reduce Left Sidebar Width
    .left-sidebar #primary {
         float: right;
         margin: 0 0 0 -21.4%;
        width: 100%;
    }
    .left-sidebar #content {
         margin: 0 7.6% 0 34%;
         width: 63.4%;
    }
    .left-sidebar #secondary {
         float: left;
         margin-left: 7.6%;
         margin-right: 0;
         width: 13.8%;
    }

    The margin reductions appear to be working.

    On another note, I tried added a border to the right side of the content area, but couldn’t get it to work. Is there a way to do this?

    Thanks again for a great tutorial.

    Hozey

  6. Hozey

    Stated all over. When I make the changes to increase the right sidebar by 5% it throws the left sidebar about half of it’s width to the left. i should point out I’m using your twenty eleven child, Layouts. Am I correct in assuming the changes outlined in your tutorial are to be made in the styles.css that came with your child or should they be made in Edit CSS or Custom CSS Manager leaving your stylesheet intact. Other modifications I’ve made in your style.css have worked fine.
    Thanks

    1. Zeaks

      The Twenty Eleven Layouts theme uses custom classes if I remember right, that could be causing the problem.

      You would have to take a look at the CSS, find the correct section for whatever layout it is you want to use, then modify the CSS as explain in the tutorial. Simple adding the CSS I gave in this tutorial probably won’t work, it’s meant to be used in a new blank child theme.

      I’d have to see the site to offer anymore advice.

      Making changes to the style.css is fine.

  7. George

    I made the following changes to the column widths, which is just what I needed. This threw the reply comment box off to the right of center under the post. How do I adjust it to be centered?

    /*To change column widths*/
    #primary {
    float: left;
    margin: 0 -34.6% 0 0; was -26.4%
    width: 100%;
    }

    #content /*Post*/ {
    margin: 0 34% 0 20.4%; was 34% 0 26.4%%
    width: 49%; was 46.4%
    }

    #secondary /*Right Sidebar*/ {
    float: right;
    margin-right: 1.8%; was 2.6%
    width: 25%; was 20.0%
    }

    #extra-sidebar /*Left Sidebar*/ {
    position: relative;
    float: left;
    width: 15%; was 20.8%
    margin-left: -63%; was -70%
    }

  8. George Neserke

    My apologies for what is certainly a newbie question. I’ve read the 2011 tutorial (thanks very much) and have been trying to change my sidebar width to allow more room for the links, but the changes I’ve made below have been to no effect.

    Here are the changes to the style.css (original primary was -26.4%, content was 58.4% and secondary was 18.8%)

    #primary {
    float: left;
    margin: 0 -36.4% 0 0;
    width: 100%;
    }
    #content {
    margin: 0 44% 0 7.6%;
    width: 48.4%;
    }
    #secondary {
    float: right;
    margin-right: 7.6%;
    width: 28.8%;
    }

    My site is coloradohikes.org. I’m using a static front page with content on the left. I’ve made the above changes and nothing has changed from what it was before. I suspect that I’m not changing the right section in the style.css, but am clueless as to where I should be making changes.

    Thanks in advance for any ideas!
    George

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*