CSS Hacking: 1 Column, Sidebars Underneath

If there's one thing I love, it's a good puzzle.

I am completely enamored with the trend of a 1-column blog design and Jim's Journal theme for TypePad is always a favorite. Minimal and spare.

Here's a test blog setup with the 3 Columns, Right layout:

Now let's put the same blog in TypePad's 1-Column Layout: (Design > Layout)

The default 1-column layout keeps the overall width of a theme, and then tucks the all the sidebar and module widgets underneath with the same width as the content.

I want something narrower - and I'd rather have the 2 sidebars underneath the blog content, side-by-side. Let's see how far I can get:

Create a Test Blog

I created a test blog and set it to the Journal Black theme and set the layout to 3 Columns Right (when testing these directions I skipped this and drove myself crazy until I realized I'd forgotten this step). I posted a test post with some Lorem ipsum text (generate your own) and some placeholder text in the sidebars using the Embed your own HTML widget (Design > Organize Content, look for the widget under Modules).

Here's my test setup:

Now my goal is to make the overall design narrower, and tuck those 2 sidebars underneath the main content column. Here we go.

Change Overall Width

First, I change the width of the entire design to 450 pixels. I go to Design > Custom CSS and add the following CSS statement. I'm adding CSS comments for each step so I can remember what statement does what:

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

#container { width: 450px; }

I save the Custom CSS and refresh the blog. Tah-dah!

So we narrowed the overall 'box' the blog sits in. But the other elements are breaking outside the box. I need to make the pagebody - the 'box' that that wraps around the content and sidebars that same width. I add:

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

#pagebody { width: 450px; }

Which produces:

So far so good. We have a nice narrow design, but our sidebars are not behaving the way that we want. They are too wide to fit side-by-side so they are stacked flush left. I want one on the left and one on the right.

Move Sidebars Underneath

I reduce the width of the sidebars until they fit side-by-side underneath the blog content.

/* reduce sidebars so they slide together side-by-side under content */

.layout-three-column-right #beta, .layout-three-column-right #gamma { margin: 0; width: 215px; }

Here's what that looks like:

But now there's now space between the two sidebars. Looks kinda gross. Let's fix that.

Then I increase the right-margin of the left sidebar and increase the left-margin of the right sidebar. Basically splitting the difference between the two. This adds a little space between the 2 sidebars.

It's like we're tapping a little wedge between the 2 sidebars.

/* add a little air between the two sidebars - sum of the margins and widths is the same as the content width, 215 + 10 + 10 + 215 = 450 */

.layout-three-column-right #beta { margin-right: 10px; }
.layout-three-column-right #gamma { margin-left: 10px; }

Better:

Tweak the Whitespace

In the original design the padding-top for the sidebars was 40px, to match the content column. It's that gaping void between the post footer and the tops of the sidebars. Let's reduce that a bit.

/* change the top padding for the 2 sidebar 'boxes' - to 10px - it was 40px which looks weird in the sidebars; */

#beta-inner, #gamma-inner { padding-top: 10px; }

Refresh:

Looking good - but our banner, navbar and footer are breaking outside the 450px boundary. The tagline is breaking out of the black box and the border of the footer stretches across the page.

Fix the Banner Width

Let's make them all the same width as everything else.

/* 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;}

And the banner text looks gross with no padding. Add a breath of air.

/* add padding in banner */

#banner-inner {padding: 10px; }

Much better! Here's the final, full-size view:

I now have a nice 1-column, narrow design and I can still drag-and-drop stuff in the sidebars which are now tucked under the blog content. Here's the full CSS I ended up with:

/* 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; }

/* reduce sidebars so they slide together side-by-side under content */

.layout-three-column-right #beta, .layout-three-column-right #gamma { margin: 0; width: 215px; }

/* add a little air between the two sidebars - sum of the margins and widths is the same as the content width, 215 + 10 + 10 + 215 = 450 */

.layout-three-column-right #beta { margin-right: 10px; }
.layout-three-column-right #gamma { margin-left: 10px; }

/* change the top padding for the 2 sidebar 'boxes' - to 10px - it was 40px which looks weird in the sidebars; */

#beta-inner, #gamma-inner { padding-top: 10px; }

/* 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; }

Never be afraid to experiment and always leave comments in your code to help the next designer - even if that next designer is you!

Comments

[Account Deleted]

Wow! this is so cool, Real Genius ^^. However, is there also a function that will make it 3 columns? not just 3 columns right? If there is, then it will be more cool. Anyway thanks for this one Typepad. You're really bringing out the best for us. :)

[Andy]

So you mean 3 columns, all the same width? Which column do you want
the content in?

[Yvonne DiVita]

Hi Andy,

Very cool trick. Not sure if this is the same question Samjien was asking, but it would be REALLY cool if we could add a third sidebar column below the main content column ... omg, just like the TypePad "site"!!

Can that be done in Custom CSS, or is it only possible in Advanced Templates?

BTW, this is Tom Collins writing from our Yvonne DiVita account.

[Andy]

So three columns underneath, yes? One way is to have only 3 sidebar modules and they are all 1/3 width. Or maybe we can tweak the footer to become that third sidebar. Hmmm...

[Yvonne DiVita]

Hmmm, indeed! For many blogs, just having three "Notes" Typelists would probably do the trick.

Do you have the CSS code handy to control the width of a Notes TypeList?

Thanks!

[Account Deleted]

Hello Andy, yeah i want the content in and then the sidebars on both sides of it. Just like this layout http://homeaffiliate.typepad.com Is there a hack to make it happen? it would be great:) Thanks for the response Andy. Keep rocking :)

[Andy]

This close to what you're looking for? http://everything.typepad.com/blog/2009/09/css-hack-2-columns-right-into-1-column-with-3-sidebar-modules-underneath.html

[Andy]

I thinks this is close to what you want: http://everything.typepad.com/blog/2009/09/css-hack-2-columns-right-into-1-column-with-3-sidebar-modules-underneath.html