SOLVED: How to have two content columns side by side?

[WebGirl]

Hi,

I've created a CMSMS site using one of the recommended templates, which has a wide content area and a column down each side. So far so good

On some of my client pages (and I'm guessing I will create a new template to do this), I need the central column to be split into two columns of equal width (for example 300px each).

I've created TWO new {content} blocks:
- {content block="column-1-centre" oneline="false" wysiwyg="true"}
- {content block="column-2-centre" oneline="false" wysiwyg="true"}

Is this the best way to do this?

OK, assuming the new Template is the way to go - HOW do I specify the WIDTH for the new content blocks?

Should I try to put them in a 2 column table? (I did try this but they appear underneath each other.)

Should I try to put them each in a DIV, and if YES, then HOW do I do that?


Please don't just say, "Use a stylesheet." I'd really like some help here to align these two content blocks side-by-side (there are still two outside columns on either side) - or - if you have a better suggestion, please let me know (in some detail).

Many thanks in advance!!

[WebGirl]

OK, this is what I did -  I found some DIV code I'd used before, with borders so I can see what I'm doing.

In the TEMPLATE - INSIDE the DIV for the MAIN CONTENT, and BELOW the {content} tag, I added this:

{content block="column-1-centre"  wysiwyg="true"}


{content block="column-2-centre" wysiwyg="true"}

I was trying to force the width in pixels, so once I used the DIVS and changed pixels to percentages, it worked just fine.

Phew! 

Here's a snapshot:



So when the client logs in to work on the site, they now see THREE content blocks, one below the other, clearly labelled.

Perfect!

(I just needed some time to throw this around in my head and stop trying to make it hard - now it's cocktail hour so I'm heading off to make an icy cold vodka tonic!)

[KO]

Check also with IE6 that things look fine. I usually make 2 divs for each block. One to make width and another to add paddings (margins) inside. This way you could use pixel or % widths without fear of braking it when changing paddings or margins.

[Russ]

And try putting some really long URL links, or stuff in the columns and test on a variety of browsers. How you going to fill the columns? The columns as described will be of independent height?

This site has some good stuff on this: http://www.positioniseverything.net/