Dvousloupcový layout s plovoucí šířkou pravého panelu
Dvousloupcový layout, ve kterém má levý panel pevnou a pravý panel 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(‚blueyellow.gif‘) top left repeat-y;
}
#levypanel
{
float: left;
width: 200px;
margin:0; padding:0;
}
#levypanel-obsah
{
margin:0;
padding: 0.5em 1em;
}
#hlavnipanel
{
margin:0 0 0 200px;
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>
MrHappy
Srp 11, 2010 v 10:16V layouty je mensi chyba, chybi zde osetreni (fix) na flow elementy, ktere mohou byt v hlavnim panelu a ktere hlavni panel nasledne rozbiji. Jedna se predevsim o oramovani hlavnihoPanelu.
Oprava:
#hlavnipanel-obsah by mel navic obsahovat (pokud jej mate ohraniceny rameckem etc.):
overflow:auto; width:100%;
viz.: http://www.quirksmode.org/css/clearing.html
kopernik
Říj 18, 2010 v 8:51tento layout je skvely ale pokud mate obsah v divu kratsi jak v divu levy panel, paticka se vam posune a menu vam preteka dolu. jak by se to dalo vyresit aby se oba panely posouvaly..diky za odpoved
Matěj
Pro 6, 2014 v 15:37Dobrý den,
mám takový dotaz. Můžu použít tento design na svůj web?