One column static width while other colum is dynamic width - html

Question

<div class="table">
<div class="sidebar"></div>
<div class="content"></div>
</div>
* {
margin:0; padding:0;
}
html, body {
width:100%;
height:100%;
}
.table {
display:table;
width:100%;
height:100%;
}
.sidebar {
width:200px;
height:100%;
background:red;
display:table-cell;
white-space:nowrap;
vertical-align: top;
}
.content {
width:100%;
height:100%;
background:orange;
display:table-cell;
vertical-align: top;
}
What am I missing exactly? :), trying to replicate this structure:
http://dev.brigademarketing.com/brigade/old-content/site1/
fiddle:
http://jsfiddle.net/8o50f0cf/

Answer 1

Remove the width:100% from the dynamic column, so it can calculate its width automatically.
Updated Fiddle
A display: table-cell element acts like a <td>, meaning that it takes the remaining space of its table parent if no width is define.

Answer 2

Here's a solution that uses calc() function and floating: http://jsfiddle.net/jyx9orLy/.
HTML:
<div class="container">
<div class="sidebar"></div>
<div class="content"></div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body, .container {
height: 100%;
}
.container .sidebar {
height: 100%;
background-color: red;
width: 200px;
float: left;
}
.container .content {
float: left;
height: 100%;
width: calc(100% - 200px);
background-color: orange;
}
A second solution is to use a table, which you are doing, and to make it work you do what #LcSalazar mentioned.
A third solution uses flexbox specification and requires a modern browser: http://jsfiddle.net/yp49uqay/.
CSS:
* {
margin: 0;
padding: 0;
}
html, body, .container {
height: 100%;
}
.container {
display: flex;
flex-direction: row;
}
.container > .sidebar {
flex: 0 0 200px;
background-color: red;
}
.container > .content {
flex: 1 1 auto;
background-color: orange;
}
And, a fourth solution that uses floating in a different way: http://jsfiddle.net/079sr0fu/.
HTML:
<div class="container">
<div class="sidebar"></div>
<div class = "contentWrapper">
<div class="content">Content...</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body, .container,
.container > .sidebar,
.container > .contentWrapper,
.container > .contentWrapper > .content {
height: 100%;
}
.container > .sidebar {
width: 200px;
background-color: red;
float: left;
}
.container > .contentWrapper {
overflow: hidden;
}
.container .content {
float: left;
width: 100%;
background-color: orange;
}