Dvousloupcový layout s plovoucí šířkou obou panelů
Dvousloupcový layout, ve kterém mají oba panely plovoucí (proměnlivou) šířku.
Pro správnou funkci si vytvořte obrázky podobné tomuto. Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Petr Staníček. Bližší popis najdete v článku Dvousloupcový beztabulkový layout.
CSS
body
{
margin:0;
padding:0;
background:#ffffff;
text-align:center;
}
#hlavicka
{
padding: 10px;
border: 1px solid blue;
background: #dddddd;
}
#obsah
{
width: 90%;
margin:1em auto;
border: 1px solid blue;
text-align:left;
max-width: 1024px;
background: url(‚blueyellow1.gif‘) 30% 0% repeat-y;
}
#levypanel
{
float: left;
width: 30%;
margin:0;
padding:0;
}
#levypanel-obsah
{
margin:0;
padding: 0.5em 1em;
}
#hlavnipanel
{
margin:0 0 0 30%;
padding:0;
}
#hlavnipanel-obsah
{
margin:0;
padding: 0.5em 1em;
}
#paticka
{
padding: 10px;
border-top: 1px solid blue;
background: #dddddd;
}
hr.cleaner
{
clear:both;
display: none
}
XHTML
<html>
<body>
<div id=“obsah“>
<div id=“hlavicka“>
Zde se nachází hlavička…
</div>
<hr class=“cleaner“ />
<div id=“levypanel“>
<div id=“levypanel-obsah“>
Menu s pevnou šířkou…
</div>
</div>
<div id=“hlavnipanel“>
<div id=“hlavnipanel-obsah“>
Obsah s pevnou šířkou…
</div>
</div>
<hr class=“cleaner“ />
<div id=“paticka“>
Zde se nachází patička…
</div>
</div>
</body>
</html>
Mohlo by vás také zajímat
-
AI na dosah ruky: Jak je to s AI v osobních zařízeních?
22. ledna 2024 -
Thunderbolt 4 vs. OCuLink: Přišel čas na upgrade?
27. května 2024 -
Co je to DNSSEC, jak funguje a jak si ho nastavit?
14. srpna 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