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. l

    I used WordPress.org to get help with the margins months ago but I still appreciate this post. I’d like to see tutorials on customizing the sidebar ex. chrisspooner.com/themes/particle and the css that goes with it.

    1. Zeaks

      Customizing the sidebar is more a matter of taste, knowledge of CSS and knowing the theme layout or the use of firebug would be needed even with a tutorial.
      I could list CSS classes that are used in the sidebar, but letting a user learn how to use Firebug – http://zeaks.org/how-to-firebug/ is more beneficial to them than looking at a bunch of CSS classes.

      I wrote this tutorial because alot of people have problems understanding how to control the sidebar width, it’s still up to the viewer to take this information and apply t to their theme the way they need it.

  2. Anne Marie Doherty

    Thanks so much. I used your code to create two sidebars in 2010 and it worked. But then when I added the code underneath it to widen the sidebar it went back to having only one. I would like my left sidebar to be a little wider for pics and my right sidebar the standard width. Is that possible using your code?

  3. Ian

    Good explanation Zeaks!

    I wonder how the flexible width of the sidebar afects any images in them? I am just going to replace an old image in the twenty eleven sidebar and thought that I would look up how wide it is and resize the new image to ‘fit’, lol!

    Time to have a play in the widget and see what happens to the size of images placed in the sidebar!

    Thanks for taking the time to post the code, appreciate it!
    Cheers

    1. Ian

      update on the twenty eleven sidebar.

      I found that images are automatically re-sized when placed in the sidebar widget. I uploaded a 400px wide image and it displayed fine in the sidebar despite clearly being “too big”.

      Clever WordPress :-0

  4. Taryn Merrick

    Hi Zeak!
    I tried this but looks like margins didn’t change… here is my code:

    }
    .left-sidebar #primary {
    	float: right;
    	margin: 0 0 0 -31.4%; /* increased margin by 5% */
    	width: 100%;
    }
    .left-sidebar #content {
    	margin: 0 5.6% 0 34%;
    	width: 50.4%; /* decreased content by 5% */
    }
    .left-sidebar #secondary {
    	float: left;
    	margin-left: 5.6%;
    	margin-right: 0;
    	width: 30.8%; /* increased sidebar width by 5% */
    }
  5. Sean

    Forgive me for probably asking something so basic, but which .php file should I be editing to change the size of the right sidebar in twenty eleven. I’ve looked at every file in the editor labeled sidebar and can’t seem to find which file I should be editing. Thanks!

      1. Sean

        OK Zeaks, I understand everything you have written above, I’m just tyring to figure out which file is the one where I change the CSS for the default right sidebar layout?

  6. Monpelaud

    To create a new page template I duplicated the file sidebar-page.php and changed the name of the new template.
    I did not do other changes in the file but when I use this new template for a page, the layout is not the same as the original template (sidebar-page.php).

    How can I create a new page template with 3 column layouts ?

    Many thanks for your help

    1. Zeaks

      When you change the name of a page template, the CSS associated with it also changes. You’ll need to see what the new body class is (firebug is great for that), and add it to the CSS the original template used to make it look the same.

      As for making it use 2 sidebars, take a look at the CSS in NomNom theme, each layout is commented, use that CSS along with the body class of your new template to create a 3 column layout.

  7. Ariel

    Hello, I’m with the Twenty eleven (child theme). My problem is that by default I see the widgets, archive, recent posts, etc, listed below of content on home page, the question is: how do I put this widgets in the right side ?

  8. Neil Hilton

    I’m not sure exactly what I am doing wrong.
    Even without changing any of the default right sidebar code, just adding it to my child theme completely breaks my website.
    I have created my child theme and activated it… It seems to be working fine.
    The moment I paste the following into my child theme it messes up the whole website, making everything completely out of place:

    #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%;
    }

    My website is http://www.AlternativeFreedom.com

    I would greatly appreciate any help you can offer in widening my sidebar.
    Thank you.

    1. Neil Hilton

      LoL
      I changed my blog to the Platform theme after I posted the question to you.

      I wasn’t having any luck making the sidebar wider in Twenty Eleven.
      As I explained in my previous post: just adding the DEFAULT css would immediately break my website (in that everything was completely out of place, with the sidebar appearing far below the content and a few other anomalies)… So my girlfriend suggested I try the theme that she has been using (Platform) since it has a very simple GUI with sliders to adjust the width of the page, content and sidebars.
      If you have any ideas about why I was having no luck with Twenty Eleven, I would still greatly appreciate your advice.
      Thank you.

      1. Zeaks

        np. I would have to look at your child theme to tell you much. Simply adding the same CSS it’s already using would not break the site unless something else was wrong. If you want me to take a look, you can email it to me at zeaks @ live .ca (minus the spaces)

        The theme you’re using is a pretty good one, if you’re happy with it, I’d stick with it.

        1. Neil Hilton

          My child theme has nothing at all in it except the information required to make the child theme. I followed the instructions on your website to make the child theme. Then all I did was add the default CSS in this article and it breaks the site.
          Strange huh?

          1. Neil Hilton

            This is EXACTLY the way my child theme’s style.css looked when I tried it earlier this morning:

            /*
            Theme Name: Child
            Theme URI: http://alternativefreedom.com/child
            Description: A child theme for Twentyeleven
            Author: Neil Hilton
            Author url: http://alternativefreedom.com
            Version: 1.0
            Tags: black, blue, white, fixed-width, custom-header, theme-options
            Template: twentyeleven
            */
            @import url('../twentyeleven/style.css')
            
            #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% */
            }
    1. Neil Hilton

      Ah, I see. I’ll have to give that a try later on.
      So until you add a change beyond “@import url(‘../twentyeleven/style.css’)” it doesn’t even try to use the child theme? Because the child theme seemed to be working fine until I added the css below.
      Thanx a bunch for all the help =)

        1. Neil Hilton

          Very good to know =)
          The thing is: I spent a bunch of time setting up my new theme, Platform, and I’m on my way out, so I can’t really test it right now. But the new theme has a few quirks to it that make me miss Twenty Eleven, so I will be seeing if I can get Twenty Eleven to work the way I want later.

          I will DEFINITELY let you know whether I can get the sidebar to widen in TwentyEleven and how it all works out for me.

          Thank you very much for all of your time and help.

    1. Sunny s

      I’ve tried and tried to decrease my margins to 3.4% and add the additional space to my content section so it’s now 71%
      This is what I changed my code to look like:
      What am I doing wrong?
      Please help!
      Thanks,
      Sunny s

      .left-sidebar #primary {
      float: right;
      margin: 0 0 0 -22.2%;
      width: 100%;
      }
      .left-sidebar #content {
      margin: 0 3.4% 0 34%;
      width: 71%;
      }
      .left-sidebar #secondary {
      float: left;
      margin-left: 3.4%;
      margin-right: 0;
      width: 18.8%;
      }

  9. 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!

  10. 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.

  11. 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.

  12. 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

  13. 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

  14. 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.

  15. 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%
    }

  16. 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 *

*
*