Třísloupcový layout bez použití tabulek, absolutního pozicování nebo CSS hacků, se stejnou velikostí všech sloupců. Levý a pravý sloupec jsou široké 150px, prostřední sloupec má plovoucí šířku.

Pro správnou funkci si vytvořte obrázek podobný tomuto. Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Petr Staníček. Bližší popis najdete v článku 3-col layout via CSS.

CSS

body
{
margin:0; padding:0;
font:11pt/1.5 sans-serif;
}
#hlavicka
{
margin:0; padding:0;
background:#dddddd;
border: 1px solid blue;
}
#hlavni1
{
margin:0; padding:0;
background:#0099FF url(„blue.gif“) top right repeat-y;
border: 1px solid blue;
}
#hlavni2
{
margin:0; padding:0;
background:url(„blue.gif“) top right repeat-y;
border: 1px solid blue;
}
#levypanel
{
float:left;
width:150px;
margin:0; padding:0;
background:url(„blue.gif“) top right repeat-y;
font-size:80%;
}
#pravypanel
{
float:right;
width:150px;
margin:0; padding:0;
background:url(„blue.gif“) top right repeat-y;
font-size:80%;
}
#stredni
{
margin:0 150px;
background:#dddddd;
font-size:80%;
border: 1px solid blue;
}
#paticka
{
background:#dddddd;
font-size:80%;
border: 1px solid blue;
}
.obsah
{
margin:0;
padding:0.5em 1em;
}
.cleaner
{
clear:both;
height:1px;
font-size:1px;
border:none;
margin:0; padding:0;
background:transparent;
}
h1,h2,h3,h4
{
margin: 0.2em 0
}
p
{
margin: 0.5em 0
}
a
{
color:black
}
.copy
{
text-align:center;
font-size:80%
}

XHTML

<html>
<body>
<div id=“hlavicka“>
<div class=“obsah“>
Obsah hlavičky…
</div>
</div>
<div id=“hlavni1″>
<div id=“hlavni2″>
<div id=“levypanel“>
<div class=“obsah“>
Obsah levého panelu…
</div>
</div>
<div id=“pravypanel“>
<div class=“obsah“>
Obsah pravého panelu…
</div>
</div>
<div id=“stredni“>
<div class=“obsah“>
Obsah stránky
</div>
</div>
<div class=“cleaner“>
&nbsp;
</div>
</div>
</div>
<div id=“paticka“>
<div class=“obsah“>
Obsah patičky…
</div>
</div>
</body>
</html>

2 Příspěvků v diskuzi

  1. Skvělé! Moc díky. Funguje dobře. Jediný problém nastává, když bych chtěl dát střednímu sloupci minimální šířku. Při použití min-width začne střední sloupec „podtékat“ pod koncem textu v pravém sloupci.

Odpovědět