CSS Hack: 1 Column with 3 Sidebar Modules Underneath

Let's keep hacking away! Last time we turned 3 Columns, Right layout into 1 column with 2 sidebars tucked underneath.

Then Yvonne and Samjien asked if there was a way to do 3 columns underneath.

Here's how:

Create a blog with theme Journal, Black and layout 2 Columns, Right.

Add 3 test posts and 3 'Embed Your Own HTML' modules (Design > Content : Modules : 'Embed Your Own HTML').

You should have a blog with 3 posts and 3 sidebar modules that looks like this:

First let's do the width changes like we did last time: (Design > Custom CSS)

 /* change entire width to the same as the content column */

#container { width: 450px; }

/* change pagebody width to the same as the content column */

#pagebody { width: 450px; }

.layout-two-column-right #alpha { width: 450px; }

.layout-two-column-right #beta { margin: 0 0 0 0px; width:450px; }

So far so good - here's what the bottom portion looks like - notice the three sidebar modules in our 1 sidebar are stacked one on top of another:

To get our faux 3-columns underneath we are going to widen the sidebar modules until they are equal widths and stretch underneath the content.

/* shrink sidebars to 1/3 width so they stack side-by-side */

.module { width: 130px; float: left; padding: 10px; }

That puts our sidebar modules - which are 3 modules inside 1 sidebar - next to eachother:

 

A few little tweaks:

/* get rid of the top padding in the sidebar */

#beta-inner { padding: 10px 0px 0px 0px; }

And the banner fixes from last time:

/* correct banner, navbar and footer width to match pagebody */

#banner-inner { width: 450px;}
#nav { padding-left: 15px; padding-right: 15px; width: 420px;}
#footer { padding-left: 15px; padding-right: 15px; width: 420px;}

/* add padding in banner */

#banner-inner {padding: 10px; }

And here we go!

 

And here is the complete CSS:

/* change entire width to the same as the content column */

#container { width: 450px; }

/* change pagebody width to the same as the content column */

#pagebody { width: 450px; }

.layout-two-column-right #alpha { width: 450px; }

.layout-two-column-right #beta { margin: 0 0 0 0px; width:450px; }

/* shrink sidebars to 1/3 width so they stack side-by-side */

.module { width: 130px; float: left; padding: 10px; }

/* get rid of the top padding in the sidebar */

#beta-inner { padding: 10px 0px 0px 0px; }

/* correct banner, navbar and footer width to match pagebody */

#banner-inner { width: 450px;}
#nav { padding-left: 15px; padding-right: 15px; width: 420px;}
#footer { padding-left: 15px; padding-right: 15px; width: 420px;}

/* add padding in banner */

#banner-inner {padding: 10px; }

Tah-dah!

Remember: Always experiment on a test blog!

Caveat: I'm not sure what will happen if you put more than three modules in the sidebar. They should continue to stack in layers since they all have that 1/3 width.

Have fun!

Comments

[Account Deleted]

Hello Andy, sorry for the late response, I got into a short vacation. WOW! I'm surprised! I wanna thank you so much Andy, you are so amazing. How sweet of you. This is what we've been looking for. Thanks for giving your time and effort to make this happen for us. This is the feature most bloggers love. If you will have this feature official in typepad? Im sure many bloggers from other platform will switch to typepad. This was based on feedbacks I've heard from my blogger friends who uses other platform. This is one feature they really love. Wow!

Thanks a lot for having this available on typepad Andy, now there is really no reason not to switch to Typepad. With typepad, everything is made easy and possible and unlimited things happen. Great job Andy. You rock!

[Tom Collins]

Too cool, Andy. Thanks! I'm going to play with this and I'll let you know how it goes.

I can see all sorts of possibities for the CSS you've shared ... so thanks again.

BTW, that was me (Tom Collins, Yvonne's partner-in-all-things) signed into one of our other accounts that's in her name, who asked the question. Yvonne was baffled by the emails notifying her you'd responded to "her" question! ;-D

[Andrew Ballenthin]

Sorry this isn't on topic I haven't had any joy with customer service on this issue:

I'm trying to get a setup similar to Mashable where they have the authors information, number of comments, date, and the Tweetmeme and Facebook 'retweet button' at the top of the posting.

See the following example: http://mashable.com/2009/09/03/bing-and-ping/

I have up to 10 guest writers that are frustrated they don't get independent representation for their articles.

Anything you can do help push TypePad to the max here? I'm working on a book about monetizing social media for international publishing group Pearson and interviewing a number of leading media mavens. It's bit embarassing not having a format that keeps up with the latest in the industry. Even your own EVP Six Apart David Tokheim is presently interviewing and assisting me with content for the book.

This breakthrough would be deeply appreciated.
Many thanks,
Andrew Ballenthin
[email protected]

[Account Deleted]

Hello Andrew, good day to you. Well, its sad that you're not enjoying this feature. Anyway we have different needs and wants and I respect that. I checked on the site example you gave and its really awesome. However, the site was built with lots of codings, html, javascripts etc. And I'm sure that the design is expensive. We must consider that wordpress themes, specially those that rocks just like the one you gave are expensive and can't have it for free. Well, the fact is, you can make a blog like Mashable if you will use advance templates but of course, it needs a lot of knowledge with codings.

I've been an affiliate of Uniqueblogdesign. One of the most prominent wordpress themes provider and know how expensive their beautiful themes are. We can't have it for free. Well, typepad also have a blog tune-up, you might want to hire them if you want to make a blog like mashable :)

I've seen one typepad blog http://www.nesn.com/ and i can say that with typepad, everything seems to be endless if we just really know about codings. Well, good luck to you Andrew and more power.

[N. Raymond Frans]

Tabea.... Salam kenal dari Manado - Indonesia. Good n thanks,-

[Account Deleted]

Hello !

Great post and very inspirational. I wanted to ask you a question about "reverse thinking" regarding this : how to make it larger rather than thinner! ^^

I explain myself : more and more widescreens and the provided templates are sometimes really narrow (I use Beckett). Any simple way you can think of to customize easily the side of the bars and main page, either in pixels or "floating" as we can do when we design the whole blogs ourselves ?

Thank you for considering my question and congratulations again for this great tip! :D

Brice