Twenty Elevel – 3 Column

I’d like this feature too. Subscribing to this thread. It would have been nice to make right and left sidebars one of the theme options. I modified sidebar.php to also load sidebar_2 into a div named ‘tertiary’, and I’ve managed to float the sidebars to the right and left of content, but they are at the bottom of the page. I dislike using positioning becasue for me it doesn’t play nice. I understand that for SEO the content should come before the sidebars or it would be much simpler. Will post here if I come up with a not-too klugey solution.

Here’s my solution in a child theme. It works in Firefox – haven’t checked in other browsers yet. It is based on an old article from the most excellent A List Apart web site.

1. Add the second sidebar (aka showcase) to sidebar.php – put this code below the final secondary widget div, and above the final endif:

<div id="tertiary" class="widget-area" role="complementary">
    <?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
    <?php endif; // end sidebar widget area ?>
</div><!-- #tertiary .widget-area -->

Here’s what I put in style.css:

#main{
	margin:0 auto;
	max-width:1000px;}

#primary{
	float:none;
	padding:0;}

#content{
	padding-left: 18%;   /* LC width */
	margin:0;
	width:58.4%;
	position: relative;
	float: left;}

#secondary{
	width: 18%;          /* LC width */
	right: 18%;          /* LC width */
	margin-left: -56%;
	position: relative;
	float: left;}

#tertiary {
	position: relative;
	float: left;
	width: 18%;           /* RC width */
	margin:0 -18% 0 3%;  }

Basically, as I understand it, the idea is to float everything to the left and then jog it over to where you want it using negative margins. Relative positioning helps to accomplish this. — PS start with the left sidebar selected in your theme options or this might not work.

As always, suggestions for how this code could be improved are welcome.

Thanks webmystery, I tried to use your solutions but it seems like the margin between the right widget area and the content is overlapping so the widget gets into the content text?

I played around with this a bit, it’s not perfect, but the sidebars don’t seem to mess up when the browser is resized.

#page { max-width: 989px;}
#primary {
	float: left;
	margin: 0 -26.4% 0 0;
	width: 100%;
}
#content {
	margin: 0 34% 0 24.6%;
	width: 45.4%;
}
#secondary {
	float: right;
	margin-right: 5.6%;
	width: 20.8%;
}
#tertiary {
	position: relative;
	float: left;
	width: 18.8%;
	margin-left: -70%;

}

I increased the page width, but it’s pretty easy to adjust it

I have 3 columns on twenty eleven following zeaks instructions. Sidebar left, content, sidebar right. However, not sure how to make the extra-sidebar (left)stretch to the same length as the default right hand sidebar (to the bottom of the page)?

Visually, you can fake it so that your columns appear to be the same height with a vertically tiled background image: http://www.alistapart.com/articles/fauxcolumns/

I’ve tried to use Zeaks code for the single posts on my site, but it just won’t work. I’ve also been trying to implement the code found here, but I can’t get that one to work either. Is there something extra I should be doing if I want to put three columns on just the post pages?

Hi webmystery, definitely using a child theme. 🙂 Of course, I was using a plugin called Theme Test Drive so I could keep my old site live while working on my redesign, but I just made it live. See the site here: http://www.weddingdecoratorblog.com.

I followed each of Zeaks’ steps, and they didn’t work for me. However, I did go to Zeaks’ site, and followed his tutorial for a single sidebar, and *that* worked.

I wonder if my desire to have 2 sidebars on just the post pages is the difference?