Who's where?
Visitor [1] : Host Settings
Visitor [5] : Site Management
Visitor [1] : Search Results
Visitor [5] : News channels
Visitor [2] : Site Settings
Visitor [2] : Security Roles
Visitor [1] : Vendors
Visitor [21] : Blog|Tutorials
Visitor [2] : DnnBlues demo page
Visitor [6] : Catalog
Visitor [1] : Resize avatar wizard
Visitor [5] : Local search map wizard
Visitor [3] : Image gift
Visitor [1] : Itune latest gadget
Visitor [1] : Avi's stumbles
Visitor [1] : Dotnetnuke templates
Twitter backgrounds gallery
background6
background10
background9
background8
background7
background4
background5
background3
background2
Support, Tutorials, Articles

How to create two columns inside the text module

   

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>

 

text
text

 

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! :)

posted @ Monday, October 1, 2007 9:58 AM by Avi A