Fluid layout

by marakoss

HTML

<div id="main">
<div id="column1" class="rounded-corner-3">
Tento zaobleny div se roztahuje dle delky textu.
    
Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
</div>
<div id="column2" class="rounded-corner-3">
Tento zaobleny div se roztahuje dle delky textu.
    
Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
</div>
<div id="column3" class="rounded-corner-3">
Tento zaobleny div se roztahuje dle delky textu.
    
Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
    Tento zaobleny div se roztahuje dle delky textu.
</div></div>

CSS

* {
    margin: 0;
    padding: 0;
}

html, body{
    background: #444;
    margin: 0;
    padding: 0;
}

.rounded-corner-3 {
    display: inline-block;
    background: #fff;
    border-left: 2px solid #ddd;
    border-right: 2px solid #ddd;
    position: relative;
    z-index: 2;
}

.rounded-corner-3:before{
    width: 100%;
    height: 100%;
    padding: 0 0 2px 0;
    border: 1px solid #ddd;
    border-left:0;
    border-right:0;
    display: block;
    content: " ";
    z-index: -1;
    position: absolute;
    top: -2px;
    bottom: 0px;
}

.rounded-corner-3:after{
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
    border-left:0;
    border-right:0;
    padding: 0 2px 0 0;
    display: block;
    content: " ";
    z-index: -1;
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: 0px;
}

#column1 {
    float: left;
    min-width: 200px;
    width: 32.33334%;
}

#column2 {
    float: left;
    min-width: 200px;
    width: 32.33334%;
}

#column3 {
    float: left;
    min-width: 200px;
    width: 32.33334%;
}

#main {
    width: 80%;
    min-width: 620px;
    margin-left: auto;
    margin-right: auto;
}