Responsive 3-Column-Layout, with a right column set to min-width

Question

I want to have a responsive layout which behaves like this:

• BIG SCREEN (left and right div bigger than 250px):The content div should be centered between the left and the right div.
• SMALL SCREEN: The right div should have a minimum width of 250px. The left div should collapse first, then the content div.

To illustrate what I mean, here some viewport sizes (the numbers don't matter - I just want to demonstrate the behavior I want) and the corresponding sizes of the left, content and right divs.

Viewport = 1600px

300px | 1000px | 300px

Viewport = 1500px

250px | 1000px | 250px

Viewport = 1400px

150px | 1000px | 250px

Viewport = 1250px

0px | 1000px | 250px

Viewport = 1000px

0px | 750px | 250px

I have no idea how to accomplish this. I'm stuck here:

HTML

<div id="left">Left</div>
<div id="content">content</div>
<div id="right">Right</div>

CSS

body {
  min-width: 800px;
  height: 100%;
}

html {
  height: 100%;
}

div#left {
  background: #ccc;
  width: 20%;
  height: 100%;
}

div#content {
  background: #aaa;
  width: 60%;
  min-width:300px;
  height: 100%;
}

div#right {
  background: #ccc;
  width:20%;
  height: 100%;
}

Answer 1

Holy grail technique (http://alistapart.com/article/holygrail)

*, *:before, *:after{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;  
}

.column {
  float: left;
  position: relative;
  padding:20px;
}

.wrapper{
  min-width:550px;
  margin-left:0;
  margin-right:250px;  
}

.left{
  display:none; 
    background:yellow;
    margin-left: -100%;    
}

@media screen and (min-width: 1250px) {
   .wrapper{
    margin-left:150px;
  }   
  .left{
    display:block;
    width:150px;
    right: 150px;
  }  
}

.content{
  width:100%;
  background:green;  
}

.right{
  background:red;
  width:250px;
  margin-right: -250px;
}

@media screen and (min-width: 1500px) {
   .wrapper{
    margin-left:250px;
  }   
  .left{
    width:250px;
    right: 250px;
  }  
}



@media screen and (min-width: 1600px) {
   .wrapper{
    margin-left:300px;
  }   
  .left{
    width:300px;
    right: 300px;
  }  
}

<div class="wrapper clearfix">
  <div class="content column">content</div>
  <div class="left column">Left</div>
  <div class="right column">Right</div>
</div>

If you don't mind about older browser compatibility you could also try with flexbox

Answer 2

The easy way is to change to different percentages at different screen sizes, and tweak it so they never dip below the width you want (in pixels).

Viewport = 1600px 25% | 50% | 25%

Viewport = 1500px 20% | 60% | 20%

Viewport = 1400px 20% | 55% | 25%

Viewport = 1250px display:none | 80% | 20%

Viewport = 1000px display:none | 75% | 25%

If you want some columns to stay at a fixed size and others fluid at certain points, that will be much more complicated. You'll need to have parent divs with padding equal to width of child columns, and then use negative margin to move the columns into the parent's padding.