V tomto tutoriálu se budem zabývat css vlastností float. Hodí se pro zkušené pisálky HTML, začínající s CSS. Vlastnost float nám slouží ke zbavení se ošklivého tabulkového layoutu a určení obtékání prvku.

Float má 3 hodnoty :

1.)

#prvek {
        float: none;
}

Prvek nebude nic obtékat.

2.)

#prvek {
        float: left;
}

Prvek se přilepí na levou stranu a všechno ho bude obtékat.

3.)

#prvek {
        float: right;
}

Prvek se přilepí na pravou stranu a všechno ho bude obtékat.

Příklady: – u příkladů nezapomeňte koukat do zdrojového kódu

1.) float: none; – zde

2.) float: right; – zde

3.) float: left; – zde

Pomocí float se tvoří také dvousloupcové layouty. V html se udělá jeden velký div a do něj dva menší. Jeden s hodnotou left a druhý right.

HTML :

<div id="all">
<div id="left">
menu<br />
menu<br />
menu<br />
menu<br />
</div>

<div id="right">
text
</div>
</div>

CSS :

body {
        font-family: verdana;
        font-size: 12px;
        text-align: center;
}
#all {
        margin: 0 auto;
        width: 600px;
        text-align: left;
        padding: 5px;
        border: 1px solid #000;
}
#left {
        width: 150px;
        float: left;
        border: 1px solid #000;
        background: #d5d5d5;
}
#right {
        width: 445px;
        float: right;
        border: 1px solid #000;
        background: #d5d5d5;
}

příklad zde

Článek pro vás napsal ZiZi

Hodnocení tutoriálu: 2.1 (hodnotilo 25 uživatelů)