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>

2 Příspěvků v diskuzi

  1. V 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

  2. tento 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

Odpovědět