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!