How to get this 2 columns layout (were one fits to content)

Question

Please note

• the vertical scrollbars shoud show up when needed
• left columns fits to width
• right column takes the rest of the space

Answer 1

Like this

DEMO1

DEMO1 CSS

 html, body {
    height:100%;
}
header{
    width: 100%;
    background: yellow;
    position: fixed; 
    top: 0;
    height: 60px !important;
    opacity:.8;
}

.content {
    position:relative;
    height: 100%;
    /*width:600px;  Sizing - any length */
    padding:60px 0 30px 0; /* Header height and footer height */
    margin:0 auto 0 auto; /* Center content */
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

.sidebar1, .sidebar2 {
    background: red;
    top:60px;
    bottom:30px;
    width: 70%;
    position:absolute;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
    overflow-y:scroll;
}

.sidebar1 {

  left:0;
    width:30%;

}

.sidebar2 {
  right: 0;
}

#scrollable2 {
  background:green;
  height: 100%;
  min-width: 300px;
  margin-left: 100px;
  margin-right: 100px;
    overflow:auto;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}

footer {
    width: 100%;
    background: yellow;
    position: fixed; 
    bottom: 0;
    height: 30px;
}

DEMO2