Fixed size left column and fluid right column both with 100% height

Question

I'm looking to construct a two-column layout with a fixed left column and a fluid right, both with 100% height, like this example:

I've tried so many variations I can't remember what I've tried now, and just can't get it to look right. I've also tried looking at websites such as LayoutGala but they don't have any example with both columns having a 100% height.

I can't remember what I have tried already but this was definitely my last attempt. I know this because this was the last visited web page before I was arrested for throwing a computer monitor from the fourth floor of an apartment block.

body { margin:0; padding:0; }
.left-column { position:absolute; top:0; width:235px; height:100%; background:#090909; }
.right-column { margin-left:235px; background:yellow; height:100%; width:100%; }


<div class="page-wrapper">
    <div class="left-column"></div>
    <div class="right-columnr">
        sd
    </div>
</div>

This is the result here:

MyFiddle

I'm so used to my 960 wide centered website, that when it came to a full screen fluid layout, it completely threw me. Any help greatly appreciated.

Solution 1

First, you need to fix right-columnr typo, Second: when you set a height of 100% on a element to take the entire height of screen, its parent should have a height of 100% too:

CSS:

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

.page-wrapper {
  height: 100%;
  position: relative;
}

.left-column {
  position:fixed; /* <-- fixes the left panel to prevent from scrolling */
  top:0;
  left:0;
  width:235px;
  height:100%;
  background:#090909;
}

.right-column {
  margin-left:235px;
  background:yellow;
  min-height:100%;  /* <-- fixes the background-color issue when content grows */
}

HTML:

<div class="page-wrapper">
  <div class="left-column"></div>
  <div class="right-column">
    This is the content.
  </div>
</div>

JSBin Demo

Solution 2

IF You really want your columns to have 100% height then You must set 100% height on body and html elements.

This works:

html {height: 100%}
body {height: 100%}
.page-wrapper {height: 100%} /* This element is redundant unless You know You will need it in future for something */
.left-column {float: left; width: 235px; height: 100%}
.right-column {overflow: hidden; height: 100%}

Edit:

Demo based on Your code: http://jsfiddle.net/YL8Eh/

Comments

[Jacques]

that solution doesn't help much because you're setting the overflow to hidden? jsfiddle.net/r61zvuk7