Třísloupcový layout se stejnou délkou všech panelů
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“>
</div>
</div>
</div>
<div id=“paticka“>
<div class=“obsah“>
Obsah patičky…
</div>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Co je to TTL a proč na něm záleží?
25. března 2025 -
-
Lék na phishing a apatii ve světě e-mailového marketingu
18. března 2024 -
Zrychlete svůj web s LiteSpeed a CZECHIA.COM
29. dubna 2025
Nejnovější
-
Google Chrome nyní mění kompromitovaná hesla – jak to funguje?
28. května 2025 -
Google spouští AI Přehledy ve vyhledávání v Česku
23. května 2025 -
-
Umělá inteligence: Co je to GPT?
12. května 2025
tazzy
Říj 31, 2009 v 22:41díky moc řešení, funguje na jedničku
Ondřej
Lis 8, 2011 v 10:40Skvě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.