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

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 Index Layout
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% */
}

Comments

Leave a Reply