Width

CSS vlastnost width určuje šířku prvku.

Přirozená šířka (auto) je 100% u blokových prvků (např. <div> nebo <p>). U nahrazovaných prvků (obrázky, applety apod.) se přirozenou (auto) šířkou myslí přirozené rozměry obrázku.

Prohlížeče se liší v tom, jak šířku interpretují. Internet Explorer normálně počítá do šířky také padding a border (margin ne). Tomu se říká quirk mód a jde o chybné chování. Podle specifikace se do šířky padding a border nepočítá (standardní mód respektovaný zejm. Mozillou). Tento rozdíl vede k tomu, že design (používající padding a border) odladěný pro Internet Explorer 5 je rozbitý v Mozille a naopak. Musí se to hackovat.

Ve standardních prohlížečích (např. Mozilla) a podle specifikace vlastnost width nefunguje na řádkové prvky (např. odkaz <a>). U nich by mělo být potřeba pro změnu šířky přidat levý a pravý vnitřní okraj (padding-left a padding-right) nebo jim předtím říci, že jsou blokové (display: block) a ne řádkové, což ovšem za nimi zalomí řádek. Internet Explorer v quirk modu dovoluje šířku nastavovat i pro řádkové elementy (což je tedy špatně).

Podpora

Příklady

Procentuální šířka

Odstavci se dá nastavit, že bude na šířku zabírat jenom 80% šířky dokumentu:

p {width: 80%}

nalevo od každého odstavce se udělá prázdné místo velké 20%. Stejného efektu by se dosáhlo použitím margin-left: 80%.

Nejčastěji se procentuální šířka odvozuje ze šířky dokumentu. Pokud už ale je prvek uvnitř jiného prvku, který má nějakou šířku, jako sto procent se bere šířka nadřazeného prvku:

<div style="width: 400px">
<div style="width: 75%">
tento oddíl bude mít šířku 300 pixelů
</div>
</div>

Chyba tabulek na 100% šířky

Pokud se procentuální šířka nastavuje tabulce (tag <table>), ignoruje vypočtenou šířku nadřazeného prvku, pokud tento horizontální má margin nebo padding. Jako 100% nechápe vypočtenou šířku nadřazeného prvku bez okraje, ale šířku plus okraj. Dělá to jenom Explorer, ale už to je problém:

<div style="margin-left: 200px">
    <table style="width: 100%">
        <tr><td>obsah tabulky</td></tr>
    </table>
</div>

takže tohle nefunguje moc špatně, protože tabulka vůbec nechápe, že si má ze šířky odpočítat okraj nadřazeného divu. Zobrazit příklad chybného výpočtu šířky tabulky s řešením.

Řešení spočívá v tom, že se tabulka obalí ještě jedním divem se stoprocentní šířkou:

<div style="margin-left: 100px; border: 1px solid blue">
    <div style="width: 100%;">
        <table style="width: 100%; border: 1px solid red">
            <tr>
                <td>obsah tabulky, která už nepřetéká moc napravo, protože je obalena ještě jedním divem</td>
            </tr>
        </table>
    </div>
</div>

Šířka pro obtékané prvky

Šířka se musí vždy nastavit u obtékaných (float) prvků, protože jinak by zabíraly 100% šířky a nebyly byl obtékané:

<div style="float: right; width: 200px">nějaký obsah</div>
a nějaký text, který to kolem obtéká zleva

Příklad obtékání dvou sloupců

Příklad přesného umístění obtékaného prvku

Vizte též

Height = výška prvku, Overflow = přetékání obsahu, Padding = vnitřní okraj, Módy prohlížečů, Display = způsob zobrazení prvku, Text-indent = odsazení prvního řádku