display:table for layout

by Ryan

HTML

<div class="outer">
    <div class="left">Left</div>
    <div class="center">Center</div>
    <div class="right">Right</div>
</div>

CSS

div.outer {
    background-color:grey;
    display:table;
    width:100%;
    height:100px;
    color: white;
}

div.left {
    background-color:blue;
    display:table-cell;
    width:50px;
    min-width:50px;
    height:50px;
}
div.center {
    background-color:green; 
    display:table-cell;
    width:auto;
    min-width:250px;
    height:50px;
}
div.right {
    background-color:red;
    display:table-cell;
    width:50px;
    min-width:50px;
    height:50px;
}