CSS Hacking: 1 Column, Sidebars Underneath

August 31, 2009

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:

3c21-1-normal

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

3c21-0-1c-version

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:

3c21-1-normal

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!

3c21-2-container-450

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:

3c21-3-pagebody-450

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:

3c21-4-sidebars-to-215

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:

3c21-6-fix-banner-footer-width

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:

3c21-7-fix-banner-padding

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 powered by Disqus

Welcome

Need help?

Follow us!

Typepad on FacebookTypepad on TwitterTypepad on Google+Typepad on PinterestSubscribe to Everything Typepad

Like us!

Typepad Newsletter

Still having trouble? Contact Support.