Spliting the content of a <div> tag into two columns

[catterfeld]

I would like to be able to split the content of a <div> into two columns, without manually putting half the content in one column, and half the content in another.

The layout is for an online magazine article, and I'd like the flexibility to change the amount of columns using the style sheet rather than editing the content.

Here is my code.

---------------------------------------------------------------------
<div id="article" style="width:720px; padding: 10px;">
<div id="image" style="padding: 10px; width: auto; float: right;"><img src="image.jpg" width="110" height="100" alt="Image"></div>

<h4>title</h4>

<p>body</p>

<div id="Key" style="position: relative; left: 693px; margin-top: -35px; width: 25px; height: 35px;"><img src="key.gif" width="25" height="25" alt="Key"></div>

<div id="Extrabox" style="background-color: #F99; padding: 10px;">

<h4>title in extra box</h4>

<P>content in extra box</P>

</div>
</div>
---------------------------------------------------------------------

I would like to be able to switch all the content of the "article" <div> between one and two columns.

Is this possible? I will obviously have all these styles in an external CSS when completed.

Many thanks for you help!

[ray326]

There's no way to automatically overflow the content of one div into another if that's what you want to do.

[catterfeld]

Can I not get the content to flow into two columns then without using another <div>?

The idea solution would be to use a class in the main <div>, e.g. <div id="article" class="twocolumns"> that wrapped the content into two columns? Is this what you're saying is impossible?

Cheers, John

[kedrhodes]

You are not the only one wanting this funtion. CSS is THE way to go. However, it's still being developed.

http://www.w3.org/TR/css3-multicol/

I hope this helps!

[catterfeld]

Thanks kedrhodes, that was an intersting read. I guess it's back to the drawing board for now then!

John