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

Question

Please note
the vertical scrollbars should show up when needed
left columns fits to width
right column takes the rest of the space

Answer 1

Here is one approach that uses CSS only.
The HTML looks like:
<div id="pageWrapper">
<header>Header</header>
<div id="contentWrapper">
<div class="table-wrap">
<div class="cell col1">
<div class="content">Column 1: Shrink-to-Fit Width</div>
</div>
<div class="cell col2">
<div class="content">Column 2: Variable Width</div>
</div>
</div>
</div>
<div id="footerWrapper">Footer</div>
</div>
and the CSS:
html, body {
height: 100%;
margin: 0;
}
body {
background-color: #E3E3E3;
}
#pageWrapper {
margin: 0 auto;
position: relative;
width: 90%; /*set to 100% or smaller or fixed width... */
height: 100%;
}
header {
display:block;
width: 100%;
height: 100px;
background: yellow;
}
#contentWrapper {
width: 100%;
position: absolute;
top: 100px;
bottom: 100px;
left: 0;
background: beige;
}
#footerWrapper {
width: 100%;
position: absolute;
height: 100px;
bottom: 0px;
left: 0;
background: gray;
}
.table-wrap {
width: 100%;
height: 100%;
}
.table-wrap .cell {
height: 100%;
}
.table-wrap .col1 {
float: left;
border: 1px dotted blue;
max-width: 80%; /* This is critical or else Column 2 can disappear */
}
.table-wrap .col1 .content {
height: inherit;
display: inline-block;
overflow-y: auto;
}
.table-wrap .col2 {
}
.table-wrap .col2 .content {
height: inherit;
overflow-y: auto;
}
See demo at: http://jsfiddle.net/audetwebdesign/kbAwf/
How This Works
Use absolute positioning to place the header, main content area and footer within the view port area.
Within the content area (#contentWrapper), the .table-wrap container has two cells, one which is floated left (column 1). This allows column 2 to fill the rest of the width.
To get the shrink-to-fit width for column 1, set display: inline-block to the inner .content container.
Finally, use overflow-y: auto for the scroll bars. (You can also use the scroll value.)
You need to set a maximum width to .col1 so that .col2 does not get pushed out of the view port. I set it to 80% but you can adjust it.
Also, note that an inline-block will expand as much as possible to flow its content, which is why you need to constrain it.
You man want to set a minimum width on #pageWrapper to prevent the layout from shrinking to something that is less than useful.

Answer 2

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

Answer 3

HTML
<div class="main">
<div class="header"></div>
<div class="mid">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer"></div>
</div>
CSS
body, html {
width: 100%;
height: 100%;
background-color: black;
padding: 0;
margin: 0;
}
.main {
background-color: white;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
}
.main, .header, .left, .right, .mid, .footer {
position: absolute;
}
.header {
height: 100px;
top: 0px;
left: 0px;
right: 0px;
border-bottom: 4px solid black;
}
.mid {
top: 104px;
left: 0px;
right: 0px;
bottom: 14px;
}
.left {
overflow-y:auto;
width: 100px;
top: 0px;
bottom: 0px;
}
.right {
overflow-y:auto;
top: 0px;
bottom: 0px;
left: 100px;
right: 0px;
border-left: 4px solid black;
}
.footer {
left: 0px;
right: 0px;
bottom: 0px;
height: 10px;
border-top: 4px solid black;
}
Working Fiddle (as shown in your post)