1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026

Forum Moderators: not2easy

Message Too Old, No Replies

Need Help With "Simple" 2 Column Fixed-Liquid Layout

Simple 2 column layout in CSS

         

NightOwl888

4:27 am on Jan 30, 2012 (gmt 0)

10+ Year Member



I am modifying my site to go from a 2-1 column order to a 1-2 column order because changing it had a negative impact on SEO purposes. However, my oringinal layout was based on tables and I want to move on to CSS. The layout must have a fixed menu on the left with a liquid content section. The catch is that the liquid content section must contain a centered 600px wide content floater. Also, the menu should have a background color that is #dcdcdc and the liquid section should have a white background. Both background colors should extend to the bottom of the viewport regardless of the size of the content.

I found an online example similar to what I was looking for and adapted it, however, I can't seem to get it working right in FireFox. Basically, my menu is along the left edge of the viewport, but when using the layout as is, the links do not work in Firefox 7 (although everything is fine in IE9).

I managed to "fix" this problem by moving my left margin from the #contentsection selector to the #contentwrapper selector, but doing this caused a.) a horizontal scroll bar and b.) made my floating content section move 151px to the right of center. I wasn't sure if I was on the right track with this fix, so I am posting the original code here that lays out fine (including the background colors) with the links not working.

I am willing to consider fixes that require more or less markup than what I have posted if that is what fixing this issue entails. Basically, I want the exact same layout I am posting with clickable links in the menu on the left (and of course, the main content should be clickable). 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

<html>
<head>
<style type="text/css">
html, body, form { padding:0; margin:0; border:none; height:100%; min-height:100%; }
body { background-color:#dcdcdc; }

#topsection { background-color:#000; color:#fff; }


#widthwrapper { width:100%; background-color:#dcdcdc; }
#leftsection { width:151px; float:left; margin-right:-100%; }
#contentwrapper { float:left; width:100%; }
#contentsection { padding:0; margin:0 0 0 151px; overflow:hidden; height:100%; min-height:100%; background-color:#fff; }
#contentfloater { width:600px; margin:0 auto; padding:10px 15px;background-color:#999; }

</style>
</head>
<body>
<form>

<div id="topsection">
 Top Navigation
 </div>
 
 <div id="widthwrapper">

 <div id="leftsection">
Left Menu<br/>
<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
Long, Long Menu<br/>
  <a href="#">This link doesn't work in Firefox</a>
 </div>


 <div id="contentwrapper">
  <div id="contentsection">
  <div id="contentfloater">
  <div id="contentcontainer">
  This is the main content of the page...
  </div>
  <div id="historycontainer">
  More page content...
  </div>
  <div id="bottomsection">
  Bottom Navigation
  </div>
  </div>
  </div>
  
 </div>
 
 </div>


</form>
</body>
</html>

Marshall

5:25 am on Jan 30, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I took a look at this and there are several things I may be over looking and/or do not understand.

a) Do you want your top navigation to span 100% of the screen though the section below only covers about 751px?
b) why does the left section have a negative left margin?
c) Why does the contentsection have a left margin of 151px?

I made some changes (below) which made the layout (possibly) appear like I think you want.

html, body, form { padding:0; margin:0; border:none; height:100%; min-height:100%; }
body { background-color:#dcdcdc; }
#topsection { background-color:#000; color:#fff; }
#widthwrapper { width:100%; background-color:#dcdcdc; }
#leftsection { width:151px; float:left; /*margin-right:-100%;*/ }
#contentwrapper { float:left; /*width:100%;*/ }
#contentsection { padding:0; margin:0 0 0 0/*151px*/; overflow:hidden; height:100%; min-height:100%; background-color:#fff; }
#contentfloater { width:600px; margin:0 auto; padding:10px 15px;background-color:#999; }

And if I may make a suggestion, use a <ul> for your navigation rather than lines and <br>'s.

Marshall

NightOwl888

5:55 am on Jan 30, 2012 (gmt 0)

10+ Year Member



a) Yes, the top navigation should be liquid and expand to 100% of the screen.
b) This is from the example I found. It apparently is used to prevent the content column from appearing below the left column. Can't link in this forum, but the page can be found in Google search titled "Css Box-model: 2 colonne - 1 col fissa / 1 col fluida - float:left;".
c) This is also from the example I found. Without this, the menu would be completely covered by the content column.

The right column should extend from 151px to the right edge of the screen regardless of the size of the viewport. This is not what happens in your example. Also, in your example if the viewport is smaller than the width of the content, the content will appear below the menu instead of producing a horizontal scrollbar.

Also, I want the right column to contain a centered floating section (centered between the left column and the right side of the viewport). The background of the right content section should be entirely white, the menu section on the left should be entirely #dcdcdc; (gray), all the way to the bottom of the viewport, regardless how much or little content is in the content section. In my final example, the centered 600px will have a white background. I made it #999 here for demonstration purposes only.

The best way to test this out is to resize the browser with your mouse to see the content center itself between the menu and the right side of the screen. Check the sample I provided - this is exactly what I want except for the fact the link is not clickable.

If you know of another 2-column layout that is 1-2 column order, please let me know what to search for - the ones at Dynamic Drive were all in 2-1 column order.

NightOwl888

12:30 pm on Jan 30, 2012 (gmt 0)

10+ Year Member



I discovered a different way to accomplish this on another web site. It isn't perfect - I had to hard-code the min-height in order to make it reach the bottom. This causes there to be a vertical scrollbar in cases where the content is too short. However, it is acceptable for my purposes because this layout will be redesigned soon anyway - I will probably go with a centered fixed width layout (including menu) to simplify things.

I tested this layout in IE7, IE8, IE9, FireFox 7, Safari, and Chrome and it looks like it works in every case. Here is the CSS. 


html, body, form { padding:0; margin:0; border:none; height:100%; min-height:100%; }
body { background-color:#dcdcdc; }

#topsection { background-color:#000; color:#fff; }

#widthwrapper { clear:both; position:relative; }
#leftsection { position:absolute; width:151px; left:0; background-color:#dcdcdc; }
#contentwrapper { margin:0 0 0 151px; }
#contentsection { padding:0; margin:0; background-color:#fff; min-height:1200px; /* slightly larger than main menu */ overflow:visible; }
#contentfloater { width:600px; margin:0 auto; padding:10px 15px; background-color:#fff; }
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / CSS 1:09 pm May 1, 2026