Two column layout - one column with min width - html

Question

Is it possible to have a two column layout whereby one of the columns has a min-width value? Please see the code below:
#container {
width: 100%;
max-width: 1200px;
min-width: 960px;
height: 600px;
margin: 0 auto;
}
#sidebar {
float: left;
width: 20%;
min-width: 300px;
height: 100%;
}
#content {
float: left;
width: 80%;
height: 100%;
}
The problem is that when the window is resized and #sidebar gets the min-width value applied, #content will drop off the page.
Ideally I would like to do this without having to use display: table and ideally a CSS only solution would be preferred.
EDIT: Here is a jsfiddle to demonstrate the issue: http://jsfiddle.net/2DwB3/

Answer 1

You can do this: http://codepen.io/anon/pen/GmwIo
#container {
width: 960px;
height: 600px;
margin: 0 auto;
overflow: hidden;
}
#sidebar {
float: left;
min-width: 300px;
height: 100%;
}
#content {
}

Answer 2

The #content column is collapsing (even in full screen size) because min-width value of the left column (#sidebar) exceeds its width value, Hence the remaining space for the right column (#content) is less than 80% of the width of the #container.
In this case the width of the #content should be changed base on the width of the #sidebar. But as you have used min-width property for the sidebar, if you set a lower value than the width value (something like 150px), It'll be impossible to calculate the width of the #content even by using CSS3 calc() function.
Alternatively, you can stop floating the right column and hide the extra horizontal overflow by overflow-x: hidden; to achieve the desired goal:
#sidebar {
float: left;
width: 20%;
min-width: 300px;
height: 80%; /* Changed for the demo */
}
#content {
height: 100%;
overflow-x: hidden;
}
WORKING DEMO.