Fluid 3-Column Layout

Fluid center column with fixed side columns. See: http://www.alistapart.com/articles/holygrail/

by Deborah Moatti

HTML

<div class="container">
    
    <div class="center column">1ère perf<br> acrobatie blablabla</div>
    
    <div class="left column">2ème perf<br> voltige blablaba </div>
    
    <div class="right column">3ème perf<br> clown </div>
    
</div>

CSS

body {
    min-width: 550px;
}

.header {
    background: pink;
}

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

.container {
    overflow: hidden;
    padding: 0 200px 0 150px;
    background: lightgray;
}

.column {
    position: relative;
    float: left;
}

.column.center {
    width: 100%;
    background: lightgreen;
}

.column.left {
    right: 150px;
    width: 150px;
    margin-left: -100%;
    background: lightblue;
}

.column.right {
    width: 200px;
    margin-right: -100%;
    background: orange;
}