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
-
ZONER Webmail jako první v Česku přináší BIMI s VMC
11. července 2024 -
Jak si vyzkoušet Apple Intelligence v EU
2. srpna 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024 -
Užitečné nástroje pro bezpečnost na internetu
17. října 2024
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024
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.