Newbie want to create a clean 3 columm layout...

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
RonnyK
Support Guru
Support Guru
Posts: 4962
Joined: Wed Oct 25, 2006 8:29 pm

Re: Newbie want to create a clean 3 columm layout...

Post by RonnyK »

This is a small change on the "Layout: Top menu + 2 columns" that comes with the installation.

In the template:
 
 

     
     
     
     

   
   
   
   

     
     
        {title}
        {content}

     
     
     

 
 
In the stylesheet:
div#content {
  clear:both;     
  padding-top: 3px;
  padding-bottom: 3px;
}

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;
}
where the margin-left and margin-right for the div#main is used to squeeze it between the left/right column. You could use percentages as well to make it fluid...

Ronny
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12711
Joined: Thu Mar 09, 2006 5:32 am

Re: Newbie want to create a clean 3 columm layout...

Post by Dr.CSS »

There are also some wireframe templates here...

http://themes.cmsmadesimple.org/Theme_Frameworks.html
Post Reply

Return to “Layout and Design (CSS & HTML)”