Page 1 of 1

converting default template into a 3-column layout

Posted: Wed Oct 15, 2008 12:20 am
by ceci
hi guys.

I am using the default template shown here (http://current.cmsmsdemo.com/) I would like to place the 'NEWS' section into its own column on the right-hand side.  I added an extra div but it gets all screwed-up.

Has anyone tried doing this? Do you  mind sharing some code?

Thanks

Re: converting default template into a 3-column layout

Posted: Wed Oct 15, 2008 7:25 am
by RonnyK
First, make sure that the floating divs (left and right) are called before the main one...., like:
 
 

     
     
     
     

   
   
   
   

     
     
        {title}
        {content}

     
     
     

 
 
Then make sure that space is there for the left/right column, and that the rest is used for the middle, in this example with fixed width, but you can use the flexible width as well....
div#leftsidebar {
  float: left;
  margin-left: 0px;
  margin-right: 0px;
  width: 120px; 
  padding:  0px 2px;
}

div#rightsidebar {
  float: right;
  margin-left: 0px;
  margin-right: 0px;
  width: 120px; 
  padding:  0px 2px;
}

div#main {
  margin-left: 125px;
  margin-right: 125px;
  padding: 0px;
}
Ronny