Proportional Multicolumn Layout

Responsive columns resize with container without compounding rounding errors. See: http://palantir.net/blog/responsive-design-s-dirty-little-secret

by mpetrovich

HTML

<div class="header">Header<br> Kielbasa beef ribs jerky, ball tip ground round strip steak venison shankle rump prosciutto corned beef shank short loin shoulder capicola.</div>

<div class="container">
    
    <div class="col1 column">Bacon ipsum dolor sit amet drumstick shank beef ham hock pork chop turkey venison bresaola corned beef tongue salami strip steak. Kielbasa filet mignon jerky pork turkey tongue chicken, boudin biltong</div>
    
    <div class="col2 column">Jowl kielbasa brisket venison pastrami frankfurter ground round turkey tongue ribeye. T-bone chuck fatback tri-tip prosciutto spare ribs, tail shank drumstick andouille venison short loin. Boudin pork tongue, rump capicola corned beef sausage turducken beef pancetta shoulder drumstick. Kielbasa chicken sirloin, tri-tip ball tip ground round swine biltong t-bone capicola tenderloin.</div>
    
    <div class="col3 column">Shoulder short loin venison ground round ribeye drumstick. Beef ribs filet mignon swine corned beef pig meatloaf ball tip salami cow pork loin. Shank venison ball tip salami turducken ham hock tail meatball. Venison beef ribs t-bone ham hock bresaola pancetta chuck swine sirloin tenderloin andouille corned beef fatback. Hamburger brisket pork, pastrami beef ribs meatball short ribs tri-tip ribeye. Swine frankfurter tongue pork belly, ribeye prosciutto chuck.</div>
    
    <div class="col4 column">Boudin pork tongue, rump capicola corned beef sausage turducken beef pancetta shoulder drumstick. Kielbasa chicken sirloin, t-bone chuck fatback tri-tip prosciutto spare ribs, tail shank drumstick andouille venison short loin.</div>
    
</div>

<div class="footer">Footer<br> Kielbasa beef ribs jerky, ball tip ground round strip steak venison shankle rump prosciutto corned beef shank short loin shoulder capicola.</div>

CSS

.header {
    background: pink;
}

.footer {
    clear: both;
    background: yellow;
}

.container {
    overflow: hidden;
    background: lightgray;
}

.column {
    float: left;
    margin-right: -100%;
}

.column.col1 {
    width: 20%;
    margin-left: 0;
    background: lightgreen;
}

.column.col2 {
    width: 10%;
    margin-left: 20%;
    background: lightblue;
}

.column.col3 {
    width: 50%;
    margin-left: 30%;
    background: orange;
}

.column.col4 {
    width: 20%;
    margin-left: 80%;
    background: brown;
}