Vnořené divy, prapodivné chování – CSS – Fórum – Programujte.com

Po dlouhé době potřebuji nakódit jedny stránky a dostal jsem se do úzkých.

Chci vytvořit šedý pruh přes celou šířku okna a v něm mít v prostředních 1200 pixelech obsah. Obsah se bude skládat z dvou sloupců - každý má svůj nadpis a pod ním je krátký text.

Prozatím můj kód vypadá takto:

<div class="sedy pozadi"><div id="paticka" class="radek">&nbsp;
 <div><h2>Nadpis 1</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
 <div><h2>Nadpis 2</h2></div>
</div></div>

A stylesheet:

.pozadi {width: 100%}
.sedy {background-color: rgba(225, 225, 225, 1);}
.radek {width: 1200px; clear: both; margin-left: auto; margin-right: auto;}
div#paticka div{width: 560px; float: left;}

Divy se správně seřadí vedle sebe, ale jakoby "vypadnou" z patičky. Jsou zobrazeny mimo ni (pod ní) - pokud bych odebral z obsahu patičky nezlomitelnou mezeru, tak se šedé pozadí vůbec nezobrazí.

Kde mám chybu?

jak se pouzije "float" tak se to tak rozhodi...  nekde na konci toho nadrazenyho divu to chce mit jeste aspon neco  s clear:both

neco jako:    <div style="clear:both"></div> pred koncem paticky </div>

Edit: vypada ze to zpusobuje hlavne ten nadpis a cokoliv vnorenyho ...

Děkuji za reakce. Můj problém vyřešilo přidání overflow: auto;