Třísloupcový layout se stejnou délkou všech panelů

1. října 2005

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>

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. tazzy

    Říj 31, 2009 v 22:41

    díky moc řešení, funguje na jedničku

    Odpovědět
  2. Ondřej

    Lis 8, 2011 v 10:40

    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

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *