[SOLVED] 3 column layout - middle column shifted down

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
amhoffmaster
Forum Members
Forum Members
Posts: 121
Joined: Sat Jan 03, 2009 5:05 pm

[SOLVED] 3 column layout - middle column shifted down

Post by 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!
Last edited by amhoffmaster on Fri May 01, 2009 3:57 pm, edited 1 time in total.
viebig

Re: 3 column layout - middle column shifted down

Post by 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
Forum Members
Forum Members
Posts: 121
Joined: Sat Jan 03, 2009 5:05 pm

Re: 3 column layout - middle column shifted down

Post by 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
Power Poster
Power Poster
Posts: 424
Joined: Sat Feb 02, 2008 12:42 am

Re: 3 column layout - middle column shifted down

Post by Ziggywigged »

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.
Take a penny, leave a penny.
amhoffmaster
Forum Members
Forum Members
Posts: 121
Joined: Sat Jan 03, 2009 5:05 pm

Re: 3 column layout - middle column shifted down

Post by amhoffmaster »

Thanks so much!
viebig

Re: 3 column layout - middle column shifted down

Post by viebig »

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

Regards
amhoffmaster
Forum Members
Forum Members
Posts: 121
Joined: Sat Jan 03, 2009 5:05 pm

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

Post by amhoffmaster »

OK
Post Reply

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