OK, let's start.
We want two columns so one we will call "textleftcolumn" and one "textrightcolumn". Since we might like to use it a few times in our page, lets just give it "classes", other than "ids" which are just for one item on a page.
The first div is the wrapping one which is there to make it a "safer place" :) (e.g of hacks).
.wrapingtwocolumnsbox {
float :left;
width:100%;
clear:both;
}
.textleftcolumn {
float:left;
width:48%;
border:1px dotted #003366;
}
.textrightcolumn {
Float:right;
width:48%;
border:1px dotted #003366;
}
We should change into source mode and write this:
<div style="float:left;width:100%;clear:both;">
<div style="float:left;width:48%;border:1px dotted #003366;">text</div>
<div style="float:right;width:48%;border:1px dotted #003366;">text</div>
</div>
That's it!.
I was adding "text" into the div so there will be some min height. why? so now you can move back to text mode and using the mouse just enter there anything you like. From images, to headers, text etc". any thing you like to do with the text module.
Of course you can add <p> around the text, or any thing else.
You can add that code so you will have an auto scroll bar: (see an earlier tutorial for that):
height:300px;
overflow:auto;
Or any other idea you have in mind like changing border, background, width, etc" etc".
One more thing. When you want to continue after those boxes, go back to source mode and move your mouse to the end.
Good luck!
The CSS
.wrapingtwocolumnsbox {
float :left;
width:100:;
clear:both;
}
.textleftcolumn {
float:left;
width:48%;
border:1px dotted #003366;
}
.textrightcolumn {
Float:right;
width:48%;
border:1px dotted #003366;
}
About the CSS
I'm using 45% width to leave some space for the padding which I was adding to prevent rendering problems. Also I'm using % and not px, so I do not have to star doing calculations. In the demo I'm attaching the style to the div. But...In case you like to use the template/idea a lot you can add the style you're making into the skin css and whenever you would like to use it just open three divs like that: (in the source mode)
<div class="wrapingtwocolumnsbox" >
<div class="textleftcolumn ">text</div>
<div class="textrightcolumn ">text</div>
</div>
(and then get back to text mode)
End! :)