Dvousloupcový layout s plovoucí šířkou pravého panelu

1. října 2005

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>

Mohlo by vás také zajímat

Nejnovější

3 komentářů

  1. MrHappy

    Srp 11, 2010 v 10:16

    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

    Odpovědět
  2. kopernik

    Říj 18, 2010 v 8:51

    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
  3. Matěj

    Pro 6, 2014 v 15:37

    Dobrý den,
    mám takový dotaz. Můžu použít tento design na svůj web?

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *