Dvousloupcový layout s pevnou šířkou

1. listopadu 2005

•

Dvousloupcový layout, ve kterém mají oba panely pevnou šířku.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Vít Dlouhý a Petr Staníček. Bližší popis najdete v článcích 2 sloupce, pevná šířka, vycentrováno a 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: 750px;
margin:1em auto;
border: 1px solid blue;
text-align:left;
}
#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>