Alternativa ke clear:both 2

27. června 2006

•

Další z možností, jak nahradit vlastnost clear:both, která někdy při formátování layoutu působí potíže. V tomto případě je použit trik, kde je rodičovský element nafloatován vlevo a současně má nastavenou šířku. Pak u jeho potomků stačí použít rovněž vlastnost float a nastavit šířku a vše funguje, jak má. V našem příkladu je sice použita vlastnost clear:both, ale pouze pro ukončení obtékání rodičovského elementu.

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

Toto řešení bylo publikováno na serveru orderedlist.com. Bližší popis najdete v článku Clearing Floats: The FnE Method.

CSS

#hlavni
{
float: left;
border: solid #030 1px;
background: #ffe;
width: 650px;
padding: 5px;
font-size: 12px;
}
#levy, #stredni, #pravy
{
float: left;
border: solid #700 1px;
background: white;
padding: 5px 10px;
margin: 5px;
}
#levy
{
width: 180px;
}
#stredni
{
width: 130px;
}
#pravy
{
width: 240px;
}
#hlavni img
{
border: solid #333 1px;
display: block;
}
.clear
{
clear: both; /* zrusime obtekani hlavniho divu */
}

XHTML

<html>
<body>
<div id=“hlavni“>
<div id=“levy“>Lorem ipsum dolor sit amet…</div>
<div id=“stredni“>Praesent nec sapien…</div>
<div id=“pravy“>Donec quis eros…<img src=“102-1.jpg“ alt=““/> Vivamus ut nisl…</div>
</div>
<div class=“clear“></div>
</body>
</html>