Fixed width left column, variable width right column

Question

Here's a simplified layout of a site:

#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 implies, 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 take up the rest of the width and will contain a bunch of floated images (kind of like what Google image search looks like). How can I do this with CSS and HTML? I'd rather not use JavaScript.

Ariel · Accepted Answer · 2012-09-05 03:49:37Z

6

Just add a 200px margin to the left edge of the right column, and float the left column.

#left_column {
  width: 200px;
  float: left;
}

#right_column {
  margin-left: 200px;
}

The 100% height is not going to work the way you think it will work.

answered Sep 5, 2012 at 3:49

Ariel

26.8k5 gold badges62 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Adi Inbar Over a year ago

I just want to add that this solution worked for me with multiple fixed columns and a variable right column: float all the columns left except the rightmost column, then set the rightmost column's margin-left property to the sum of the widths of the other columns (plus a margin).

Lucas Green · Accepted Answer · 2012-09-05 04:02:53Z

1

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

edited Sep 5, 2012 at 4:02

answered Sep 5, 2012 at 3:57

Lucas Green

3,95924 silver badges27 bronze badges

2 Comments

Raceimaztion Over a year ago

Not quite right. Your left margin is supposed to be 200px, not 20%.

Adi Inbar Over a year ago

Before I found Ariel's solution, I experimented with setting the width of the left column(s) to a fixed value and setting a percentage value for the right column, but that didn't work very well. Up to a point, when the browser window's width is reduced, text in the right column wraps within the column, but after that point (depending on what percentage is used for the right column), the text wraps around to the left side of the page on the next line. If you set margin-left for the right column, the always stays within the column. Same behavior in FF, IE, Chrome.

swapnesh · Accepted Answer · 2012-09-05 04:00:25Z

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;
}

The fiddle appears to be obsolete. There's something totally different there now.

mmertel · Accepted Answer · 2012-09-05 04:14:56Z

0

I think the height needs to have a pixel value - percentage values don't seem to increase the 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>

answered Sep 5, 2012 at 4:14

mmertel

3972 silver badges9 bronze badges

Comments

uhezay · Accepted Answer · 2014-06-27 00:08:54Z

0

These solutions didn't quite work for me. Based on what I read on http://derpturkey.com/two-columns-with-one-fixed-width-and-one-variable-width/, I ended up with something along the lines of this:

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

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

answered Jun 27, 2014 at 0:08

uhezay

3511 gold badge2 silver badges13 bronze badges

Collectives™ on Stack Overflow

Fixed width left column, variable width right column

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related