Twenty Eleven Theme – Change Sidebar Width

This post has been updated with a better explanation, please visit Here I’ll show you how to change the sidebar width of Twenty Eleven theme. Twenty Eleven uses a fluid width, so widths are defined as percentages instead of pixels, which can be a bit confusing if you’re not used to working with them.

Just remember, everything needs to add up to no more than 100% or it will break the layout. Take into account margins, and padding and width of elements.

Lets start off by looking at the left sidebar layout of Twenty Eleven.

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

The sidebar class is #secondary, the post area is #content, and #primary is the area content area resides.

I want to increase the width of the left sidebar by 4%, so what we need to do is, increase the width of the sidebar, move the position of the content, and make room for the new sidebar width.

Here’s my new CSS.

.left-sidebar #primary {
    float: right;
    margin: 0 0 0 -30.4%; /* increased left margin 4% from -26.4% to -30.4% */
    width: 100%;
}
.left-sidebar #content {
    margin: 0 7.6% 0 38%; /* increased right margin 4% from 34* to 38% */
    width: 58.4%;
}
.left-sidebar #secondary {
    float: left;
    margin-left: 7.6%;
    margin-right: 0;
    margin-top: 20px;
    width: 22.8%; /* increased sidebar width 4% from 18.8% to 22.8% */
}

As you can see it’s just a matter of adjusting the sidebar width and 2 margins to compensate for the new width. You can change the width to whatever you want, just make sure you change the other two by the same amount.

Comments

    • says

      Hi J1m. That could depend on alot of things, usually it’s because there isn’t enough room for it to display where it should, but open a forum thread and I’ll take a look at your code.

  1. says

    Hi there, I am working on this site and I am using j query vertical mega menu to create my vertical navigation. I need to push the navigation right to the left hand edge to accommodate my layout. I can not figure out where to go to edit that. Can you help? Thanks Amy

  2. says

    @Hannah using the same classes will also change the sidebar width on the sidebar page template. I’ve tested the code from the tutorial in a child theme and it doesn’t cause the sidebar to drop on the sidebar page template.

    The sidebar page template does have a body class, as do all pages for WordPress so you can direct CSS at that specific page.

  3. says

    Hi, I would ask you to please help me change right-sidebar width. I am really new to programming so I really dont know how to do this on right-sidebar, like you did here for the left-sidebar.

    thank you,
    Aravinda

  4. says

    Hi I am just setting up the NomNom theme for my blog – and I totally want to make my right-hand sidepanel a little bigger (so it will think 300 x 250 ads in) – more like it looks on this page. I know you did the left above and I should be able to work it out – but I am totally confused none of my changes worked in the custom css panel in the theme options.

    is there any chance you can help with the css code to fix it?

    thanks

    • says

      Hi Danielle,

      I’ll be updating this post in the next few days with both left and right sidebar layouts, as well as left and right sidebar layouts that reduce the padding which is what I’m using on this site.

  5. says

    Hello! I’m just beginning to design my new WP site and eventually move over from Blogger. I used this & it worked great. Just wondering how I can find the pixel values of the widths of the sidebar based on the percentages. In order to insert well-proportioned images, it’d really be helpful. Thanks!

    • says

      Hi Jelli. There is a much better explanation of the Twenty Eleven layout here. http://zeaks.org/general/twenty-eleven-sidebar-width-explained-and-2-bonus-layouts/

      But it’s not hard to figure out. In Twenty Eleven style.css (for the right and left sidebar layouts) the max-width is 1000px, the rest of the layout is based around that.

      The first image in that post I linked shows the content width, sidebar width and margins between them all. Side Width = 1000 px wide Content Width – 58.4% = 584px Sidebar width – 18.8% = 188px Left of content margin – 7.6% = 76px right of content margin – 7.6% = 76px right of sidebar margin – 7.6% = 76px

      If you wanted your sidebar 300px wide that would be 30% Then you need to reduce the content width by 112px to make up for the wider sidebar (300-188=112px) 584px-112=472px or 47.2%

      So for a 300px wide sidebar your content width must be 47.2% and sidebar 30%

  6. eugene says

    I would like to reduce extra space between left and right of sidebar.I am using 2011 theme.Also,space between header and content page.Tried in page structure but not working pl see screen shot i treid ur way didint worked

  7. eugene says

    /* Right Content */ .left-sidebar #primary { float: right; margin: 0 0 0 -30.4%;/* increased left margin 4% from -26.4% to -30.4% */ width: 100%; } .left-sidebar #content { margin: 0 7.6% 0 38%;/* increased right margin 4% from 34%* to 38% */ width: 58.4%; } .left-sidebar #secondary { float: left; margin-left: 7.6%; margin-right: 0; margin-top:20px width: 22.8%;/* increased sidebar width 4% from 18.8% to 22.8% */ }

  8. says

    I am using Twenty-Eleven and the Firestorm Real Estate plugin… I updated both WP and the plugin and now the sidebar is at the bottom of my page. I would like to move it to the top. Thoughts on how to fix this? cx-energy.com/property

    • says

      Usually when the sidebar is pushed to the bottom, there isn’t enough space for it to fit along side the content. If you’ve tried disabling the plugin and the sidebar moved back into place, I would contact the plugin author to see what could be causing the problem

Leave a Reply