Comments on: Changing a 2-column stylesheet/theme to 3 columns

Question: Changing a 2-column stylesheet/theme to 3 columns

jbickers — Wed, 23 Jul 2008 08:21:08 -0800

CSS gurus: Changing a 2-column layout to a 3-column one?

I've been using this theme for a WordPress site, and it's great ... but it needs to become three columns instead of two. My CSS skills are passable and I've not attempted this kind of major stylesheet surgery before - is this easily doable?

It's a fixed width theme, so all I need to do is shave off enough room from the main column to facilitate a right sidebar that is identical to the one on the left. Any hand-holding would be appreciated.

By: le morte de bea arthur

le morte de bea arthur — Wed, 23 Jul 2008 08:46:37 -0800

Your existing columns are defined by these CSS entries:

#content {float:right; line-height:1.5em; margin:0; padding:0; text-align:left; width:750px;}

and

#sidebar {float:left; line-height:1.4em; margin:0 0 5px; padding:1px 0 0; width:195px;}

These are enclosed by an outer div, 'wrap':

#wrap {color:#404040; margin:10px auto; padding:0; width:970px;}

750+195 = 965 - the 'wrap' div appears to be slightly over-width, but never mind.

Decide how wide your extra column needs to be, and subtract this from the #content and sidebar divs. So you could change the width values of #sidebar and #content to 150 and 600 respectively, giving you an allowance of 195px, for example).

Define a #rightbar CSS style in the 1024px.css file with the desired width (I've just copied the left bar and changed the float):

#rightbar {float: right; line-height:1.4em; margin:0 0 5px; padding:1px 0 0; width:195px; }

In the HTML, insert the 'rightbar' div after the "content" div, i.e.

<div id="content>
.....
</div>>

<div id="rightbar">
...... your new content here ......
</div>

<div id="sidebar">
......
</div>

That should do it... although knowing me an error will have crept in somewhere...
You may have to move the "rightbar" div after the "sidebar" div if they appear in the wrong order :) Using multiple right floats isn't something I've done...

By: jbickers

jbickers — Wed, 23 Jul 2008 10:40:23 -0800

Yes, multiple right-floats is turning out to be problematic. The left sidebar is called by the WP get_sidebar function, while the right sidebar is coming from a PHP include that I've added - and it doesn't appear to matter what order I put them in, it always wants to put the right sidebar to the left of the main content area.

??

By: bjgeiger

bjgeiger — Wed, 23 Jul 2008 11:06:07 -0800

Self link view source for style sheets for 3 col layouts.

By: tracert

tracert — Wed, 23 Jul 2008 12:26:20 -0800

So I'm just going to throw this out there.

By: le morte de bea arthur

le morte de bea arthur — Thu, 24 Jul 2008 01:51:30 -0800

I think you can safely make all three of your columns left floats: that way, they'll appear in order from left to right.