Layout na celou šířku stránky – CSS – Fórum – Programujte.com

Ahoj

Rád bych vyřešil problém se šířkou layoutu.Pro vysvětlení použiji příklad:

Chci mít layout, kde bude hlavička, obrázek, tělo a patička, takže velmi zjednodušeně, čtyři divy pod sebou. Každý div bude mít jinou barvu pozadí a chci, aby byl na celou šířku stránky, tedy widht u boxu nastavím na 100%. Jak udělat, aby byl obrázek roztažen na celou šířku ještě úplně nevím, ale na to jsem zde několik dotazů zaregistroval, tak se na to ještě kouknu. Samotný obsah stránky ale chci mít široký jen 1000px a vycentrovaný doprostřed.

Chápu to správně, že vždy vytvořím div pro jednotlivou část stránky (tedy třeba hlavičku), u té tedy nastavím 100% šířku a dovnitř pak vždy vnořím další div, který už bude mít definovanou šířku 1000px a nějak jej vycentruji?

Připadá mi to tak logické, ale mám z toho dojem, že dělám něco strašně složitě, ale nenapadá mě, jak to udělat jednodušeji...

#1 Gooo
Potřebuješ minimálně dva divy v sobě. Rodičovský bude mít šířku 100%, zde si nastavíš například barvu pozadí, poté do tohoto rodičovského divu vložíš druhý div, kterýmu nastavíš šířku na 1000px a margin: 0 auto. Nastavení marginu ti zajistí, aby byl div zarovnán na střed. Tomuto vnitřnímu divu můžeš opět nastavit specifickou barvu pozadí, například bílou, aby na něm šel dobře číst text.

div.outer {
    width: 100%;
    background-color: black;
}

div.inner {
    width: 100px;
    margin: 0 auto;
    background-color: white;
}

<div class="outer">
    <div class="inner">
        <!-- Content of your webpage -->
    </div>
</div>

Jinak ne, neděláš to složitě. Je to logické a jednoznačné řešení.

#2 ondrej39
Děkuji

#2 ondrej39

A ještě se zeptám: Zkouším to nějak napsat a něco mi nefunguje. Zdroj vypadá takto:

.BOX_6_1_Matka    { width: 100%; background-color: #303030; color: #F0F0F0; clear: both;}
.BOX_6_1_Dcera 	{ width: 1000px; margin: 0 auto;}
.BOX_6_2 	{ float: left; text-align: left;}



<div class="BOX_6_1_Matka">
    	<div class="BOX_6_1_Dcera">
		<div class="BOX_6_2">Test</div>
	</div>
</div>

Takže Matka bude na celou šířku a je podbarvena #303030. Dcera pak jen definuje, že šířka obsahu bude 1000px. No a pak potřebuji vložit další box (pro ukázku jsem dal jen .BOX_6_2, ale budou tam 4 a každý bude mít šířku 25%). Jenže když tam vložím třetí box, tak se zruší podbarvení #303030. Když vložím jen text bez divu, tak je podbarvení OK. Mám tam nějak špatně návaznosti? 

#4 Gooo
Floatované elementy se neeviduji v DOMu tak, jak ty bys chtěl. Pokud chceš, aby se ti floatovaný element do DOMu zařadil (převážně jeho výška), musíš doplnit elementu, který v sobě floatovaný element obsahuje, clearfix. Například takhle:

.BOX_6_1_Dcera::after, .BOX_6_1_Dcera::before {
        display: block;
        content: "";
        clear: both;
    }

Tak, jak to máš nyní, evidují divy s třídami Matka a Dcera nulovou výšku, proto se ti pozadí nezobrazuje.

Ja ti to reknu takhle: Float je celej na pikacu! Pokud ses zacatecnik a chces to mit dobre, pouzij tabulku nebo display:table. Na float se nemuzes spolehnout, to jsou proste plujici prvky, ktere vyzaduji presne zadani. Treba pro starsi prohlizece je musis obklopit display:inline-block (coz je neco jako tag P), musis tam mit cleary, ...
::after, .::before ti ve starsich prohlizecich nemusi fungovat nebo nemusi spravne fungovat (chova se to odlisne v IE a FF)
Zkratka float je desne nespolehlivej. Staci malickost a celej layout jde do haje. (treba nekde margin uvnitr floatovaneho boxu, kterej pretece vne box). Osobne se tomu snazim vyhybat, co to jen jde.

Děkuji Ondřejovi a Peterovi. After a before zápis úplně nechápu, ale funguje to. Tabulku používat nechci, takže se kouknu na display: table.

Každopádně, děkuji