Fixed Width Left Column, Variable Width Right Column

Question

Here's a simplified site layout:

#left_column { width: 200px; height: 100%; } <div id="left_column"> </div> <div id="right_column"> /* A bunch of 100px width photos that are being floated */ </div> 

So, as the code suggests, I have a left column and a right column. The left column should be 200 pixels wide and go to the bottom of the screen. The right column should occupy the rest of the width and contain a bunch of floating images (like what Google image search looks like). How can I do this using CSS and HTML? I would prefer not to use JavaScript.

Answer 1

Just add a 200px marker to the left edge of the right column and place the left column.

 #left_column { width: 200px; float: left; } #right_column { margin-left: 200px; } 

A height of 100% will not work the way you think it will work.

Answer 2

HTML:

 <div id="leftcol">Demo text</div> <div id="rightcol">More demo text</div> 

CSS

 #leftcol{ position:fixed; left:0; top:0; height:100%; width:200px; background-color:yellow; } #rightcol{ width:100%; -moz-box-sizing: border-box; /*The rest of the browsers support this now*/ box-sizing: border-box; margin:0; padding:0; padding-left:200px; min-height:2000px; background-color:blue; }​ 

Demo

Answer 3

Try this fiddle -

http://jsfiddle.net/hKyzT/

HTML

 <div id="left_column"> /* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated */ </div> <div id="right_column"> /* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated *//* A bunch of 100px width photos that are being floated */ </div> 

CSS

 html, body, #wrapper, #left_column, #right_column { height: 100%; min-height: 100%; } #left_column { width: 200px; float: left; border:1px solid green; height: 100%; min-height: 100%; } #right_column { margin-left: 200px; border:1px solid red; } 

Answer 4

I think that height should have a pixel value - percentage values ​​don't seem to increase height.

 <style type="text/css"> #left_column { width: 20%; float:left; background-color:blue; } #right_column { width:80%; float:right; background-color:green; } div { height:1000px; } </style> <div id="left_column">&nbsp;</div> <div id="right_column">&nbsp;</div> 

Answer 5

These solutions did not quite work for me. Based on what I read at http://derpturkey.com/two-columns-with-one-fixed-width-and-one-variable-width/ , I got something like this:

 #right_column { margin-left: 200px; float: left; } #left_column { float: left; width: 200px; margin-left: -100%; }