Changing a 2-column stylesheet/theme to 3 columns

July 23, 2008 8:21 AM

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.

posted by jbickers to Computers & Internet (5 answers total)

Best answer: 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...
posted by le morte de bea arthur at 8:46 AM on July 23, 2008

Response by poster: 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.

??
posted by jbickers at 10:40 AM on July 23, 2008

Self link view source for style sheets for 3 col layouts.
posted by bjgeiger at 11:06 AM on July 23, 2008

Best answer: So I'm just going to throw this out there.
posted by tracert at 12:26 PM on July 23, 2008

I think you can safely make all three of your columns left floats: that way, they'll appear in order from left to right.
posted by le morte de bea arthur at 1:51 AM on July 24, 2008