Menu icon Foundation
Centered column bumping next column down

I am setting up a page that has a column on the left for navigation, a large center column for page content, and a narrower third column for a sidebar. I would like to center the middle column, but if I set it to centered it kicks the sidebar down to the next line. This happens if everything adds up to twelve, and if it adds up to less than 12. It happens if I add the "end" class to the last column, and if I don't. What am I missing here? Thanks very much for any help.!

Here's a sample of code:

<div id="content">
		
	<div id="inner-content" class="row clearfix">

        <div class="large-2 columns sidenav">
            menu here 
        </div>
			
	    <div id="main" class="large-4 large-centered medium-4 medium-centered columns">
			page main content here
		</div> <!-- end #main -->

        <div id="sidebar1" class="sidebar large-3 medium-3 columns" role="complementary">
                sidebar content goes here
        </div>
				    
	</div> <!-- end #inner-content -->

</div> <!-- end #content -->

            

         

centeredcolumn

I am setting up a page that has a column on the left for navigation, a large center column for page content, and a narrower third column for a sidebar. I would like to center the middle column, but if I set it to centered it kicks the sidebar down to the next line. This happens if everything adds up to twelve, and if it adds up to less than 12. It happens if I add the "end" class to the last column, and if I don't. What am I missing here? Thanks very much for any help.!

Here's a sample of code:

<div id="content">
		
	<div id="inner-content" class="row clearfix">

        <div class="large-2 columns sidenav">
            menu here 
        </div>
			
	    <div id="main" class="large-4 large-centered medium-4 medium-centered columns">
			page main content here
		</div> <!-- end #main -->

        <div id="sidebar1" class="sidebar large-3 medium-3 columns" role="complementary">
                sidebar content goes here
        </div>
				    
	</div> <!-- end #inner-content -->

</div> <!-- end #content -->

            

         
Marguerite Esmonde over 5 years ago

OK I think I figured this out. The problem is that the centered column is not floated, so that messes up the third column. I ended up leaving the middle column as a regular column, then nesting a new row with a ten col wide centered column in it. That seems to work.

Now to adjust it for different widths.

Rafi Benkual over 5 years ago

Ok thanks for posting your solution!