Čtyřsloupcový layout s position: absolute;

31. července 2006

•

Toto řešení ukazuje neobvyklý layout se čtyřmi sloupci. Řešení využívá vlastnost position: absolute, což nebývá typické. Jedná se o zajímavý a přitom funkční layout.

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

Toto řešení publikoval Eric Costello. Bližší popis najdete v článku LAYOUT TECHNIQUES: 4 columns, all fluid.

CSS

body
{
margin:5px 0 0 5px;
background: #eee;
}
#levyobsah
{
position:absolute;
left:1%;
width:20%;
top:50px;
background:#fff;
border:1px solid #000;
}
#centralnelevyobsah
{
position:absolute;
left:22%;
width:28%;
top:50px;
background:#fff;
border:1px solid #000;
}
#centralnepravyobsah
{
position:absolute;
left:51%;
width:28%;
top:50px;
background:#fff;
border:1px solid #000;
}
#centralnepravyobsah p
{
font-size: 71%;
}
#pravyobsah
{
position:absolute;
left:80%;
width:19%;
top:50px;
background:#fff;
border:1px solid #000;
}
p
{
margin:0 10px 10px;
}
h1
{
text-align: center;
font-size: 140%;
padding-top: .5em;
margin: 0 0 .5em;
}
h2
{
font-size: 120%;
padding-top:10px;
margin:0 10px 10px;
}

XHTML

<html>
<body>
<h1>4 Sloupcový layout s position: absolute;</h1>
<div id=“levyobsah“>
<h2>Levý Obsah</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
</div>
<div id=“centralnelevyobsah“>
<h2>Centrálně-levý Obsah</h2>
<p>Quisque quis tellus vel ipsum sollicitudin cursus. Ut hendrerit. ..</p>
</div>
<div id=“centralnepravyobsah“>
<h2>Centrálně-pravý Obsah</h2>
<p>Suspendisse nonummy. Cras facilisis nonummy arcu. Phasellus aliquam…</p>
</div>
<div id=“pravyobsah“>
<h2>Pravý Obsah</h2>
<p>Maecenas tempus sagittis nulla. Suspendisse pede. Phasellus vitae est ac diam…</p>
</div>
</body>
</html>