CMS Made Simple Forums

Posted: **Thu Apr 30, 2009 2:25 pm**

I followed a solved post on how to convert the top menu with 2 columns to a 3 column layout. Most of it worked for me. The only problem I'm having is that the center content column is shifted down to the middle of the page while the left and right columns seem to be aligned to the top properly. The wrapper for the page is 930px.

Here's a link: http://www.bethel.nurelm.com/index.php? ... e-test3col

Here's the css:

Code: Select all

div#content {
   margin: 0; 
   background-color:#FFFFFF;



}

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

div#sidebar {
   float: right;
   margin-left: 3px;
   margin-right: 3px;
   margin-bottom: 5px;
   margin-top: 5px;
   width: 160px;
   padding: 0px;
}

div#main {
   float: left;
   width: 550px; 
   margin-left: 0px;
   margin-right: 0px;
   padding: 0px;
   background-color: #EFEFEF ;
}

and the corresponding template info:

Code: Select all

{* Start Content (Navigation and Content columns) *}
   <div id="content">
   
	 {* start leftbar *}
	  <div id="leftbar">
	    {content block='leftbar'}
	  </div>
	  {* end leftbar *}
	  
     
	  {* Start right Sidebar *}
      <div id="sidebar">
         {content block='Sidebar'}
      </div>
      {* End Sidebar *}

      {* Start Content Area *}
      <div id="main">
         <h2>{title}</h2>
         {content} <br />	 
      </div>
	  {* End Content Area *}


   </div>
   {* End Content *}

Any ideas why the center column would be shifting down? It displays the same in both IE and FF.
Thanks for your help!

Posted: **Thu Apr 30, 2009 7:12 pm**

Yes I have!

the sidebar width should be equal or less than 150px.

Try it, and applaud me if you can!

Regards

G

Posted: **Fri May 01, 2009 12:41 pm**

Excellent!!! that worked. Thank you so much. It was driving me crazy.

I want to understand why...220 (left) + 160(side) +550(middle) = 930 pixels wide. Was it because I didn't account for the margins in the sidebar in my calculations?

Posted: **Fri May 01, 2009 1:29 pm**

amhoffmaster wrote: Was it because I didn't account for the margins in the sidebar in my calculations?

Exactly. You have to account for any margin and/or padding and subtract that from your final width.

Posted: **Fri May 01, 2009 1:33 pm**

Thanks so much!

Posted: **Fri May 01, 2009 3:41 pm**

great! add [solved] to the subject so other can learn that too

Regards

Posted: **Fri May 01, 2009 3:56 pm**

CMS Made Simple Forums

[SOLVED] 3 column layout - middle column shifted down

[SOLVED] 3 column layout - middle column shifted down

Re: 3 column layout - middle column shifted down

Re: 3 column layout - middle column shifted down

Re: 3 column layout - middle column shifted down

Re: 3 column layout - middle column shifted down

Re: 3 column layout - middle column shifted down

[SOLVED] Re: 3 column layout - middle column shifted down