Třísloupcový fluidní layout

1. října 2005

•

Jasné a stručné – třísloupcový plovoucí layout.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Russ Weakley. Bližší popis najdete v článku Tutorial 9 – Liquid three column layout.

CSS

#obalovydiv
{
width: 90%;
margin: 10px auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%;
}
#hlavicka
{
padding: .5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#levanavigace
{
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
#pravanavigace
{
float: right;
width: 160px;
margin: 0;
padding: 1em;
}
#obsah
{
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em;
}
#paticka
{
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
#levanavigace p, #pravanavigace p { margin: 0 0 1em 0; }
#obsah h2 { margin: 0 0 .5em 0; }

XHTML

<html>
<body>
<div id=“obalovydiv“>
<div id=“hlavicka“>
<h1>Hlavička</h1>
</div>
<div id=“levanavigace“>
<p>
Zde je obsah levého panelu…
</p>
</div>
<div id=“pravanavigace“>
<p>
Zde je obsah pravého panelu…
</p>
</div>
<div id=“obsah“>
<h2>Podnadpis</h2>
<p>
Zde je obsah stránky…
</p>
</div>
<div id=“paticka“>
Patička
</div>
</div>
</body>
</html>