CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 2051

Fixed width left column, variable width right column

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.

Upvotes: 4

Views: 4810

Answers (5)

uhezay
uhezay

Reputation: 341

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

Upvotes: 0

mmertel
mmertel

Reputation: 397

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>

Upvotes: 0

Lucas Green
Lucas Green

Reputation: 3959

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

Upvotes: 1

swapnesh
swapnesh

Reputation: 26722

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

Upvotes: 0

Ariel
Ariel

Reputation: 26753

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.

Upvotes: 6

Related Questions