css kolor tła z elementami pływającymi

Question

Powiedzmy mamy ten bardzo prosty scenariusz

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

I to jest do stylizacji:

.content { 
    width: 960px; 
    height: auto; 
    margin: 0 auto; 
    background: red; 
    clear: both; 
} 

.left { 
    float: left; 
    height: 300px; 
    background: green; 
} 

.right { 
    float: right; 
    background: yellow; 
} 

I rzeczą jest ... kiedy dodać do niej treści Powinno się rozebrać div rodzica, a my musimy zobaczyć czerwone tło ... chodzi o to, że nie widzę czerwonego tła, które wypełnia całą wysokość.

Jakieś pomysły ???

Dzięki za tonę zaawansowaną.

EDIT:here is a fiddle to test

Answer 1

Po uniesieniu elementów potomnych są one usuwane z przepływu dokumentu. W ten sposób rodzic nie ma już zdefiniowanych wymiarów, ponieważ dzieci nie zajmują technicznie przestrzeni. W ten sposób element macierzysty zapada się samoczynnie. To samo dzieje się, gdy absolutnie pozycjonowanie elementów dzieci też.

W tym przypadku możemy to naprawić, dodając overflow:hidden do elementu nadrzędnego, zmuszając go do umieszczenia elementów potomnych. Ewentualnie overflow:auto działa równie dobrze. Niektórzy mogą sugerować, że jest nawet lepszy niż overflow:hidden, ponieważ będziesz w stanie stwierdzić, czy jakiekolwiek obliczenia są wyłączone.

jsFiddle example

.content { 
    overflow:hidden; 
} 

Teraz element rodzic nie jest już upadł i czerwone tło jest widoczne.

Alternatywnie można użyć funkcji clearfix, jeśli szukasz wsparcia w starszych przeglądarkach, ale nie zalecam tego.

Answer 2

jak o ustanawianiu margines i padding na 0 na WSZYSTKICH div?

Answer 3

Spróbuj zamknąć wszystkie wsporniki do nazw klas w układzie html i css dodać właściwość float:left do stylu css .content klasy http://jsfiddle.net/u3W79/

Answer 4

używam pustym wyraźny div na końcu pojemnika zawartości

dodany CSS:

.clear { 
    clear: both; 
} 

HTML:

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
    <div class="clear"></div> 
</div>