[SOLVED] 3 column layout - middle column shifted down

[amhoffmaster]

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!

[viebig]

Yes I have!

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

Try it, and applaud me if you can!

Regards

G

[amhoffmaster]

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?

[Ziggywigged]

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.

[amhoffmaster]

Thanks so much!

[viebig]

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

Regards

[amhoffmaster]

OK