Layout Liquido

by Angelo Rogério Rubin

HTML

<div id="container_global">
    <div id="container_topo">container_topo</div>
    <div id="container_central">
        <div id="container_um">container_um</div>
        <div id="container_dois">container_dois</div>
        <div id="container_tres">container_tres</div>
    </div>
    <div id="container_rodape">container_rodape</div>
</div>

CSS

#container_global {
    font-family: verdana;
    font-size:11px;
    overflow: hidden;
    border: 1px solid red;
}

#container_topo {
    overflow: hidden;
    border: 1px solid #CCC;
    width: 100%;
    float: left;
    height: auto;
    min-height: 100px;
}

#container_central {
    overflow: hidden;
    border: 1px solid green;
    width: 100%;
    float: left;
    height: auto;
    min-height: 100px;
}

#container_um {
    overflow: hidden;
    border: 1px solid #CCC;
    width: 33%;
    float: left;
    height: auto;
    min-height: 200px;
}

#container_dois {
    overflow: hidden;
    border: 1px solid #CCC;
    width: 33%;
    float:left;
    height: auto;
    min-height: 200px;
}

#container_tres {
    overflow: hidden;
    border: 1px solid #CCC;
    width: 33%;
    float:left;
    height: auto;
    min-height: 200px;
}

#container_rodape {
    overflow: hidden;
    border: 1px solid #CCC;
    width: 100%;
    float: left;
    height: auto;
    min-height: 100px;
}