Come mantenere il div flottante nel frame del genitore div?

Question

Ho un div contenente diversi altri div con l'impostazione float: left. Ora voglio una cornice intorno a tutti loro, così ho messo un bordo sul div genitore, ma quelli galleggianti "di flusso" fuori della cornice ...

CSS:

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

Html:

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
</div> 

Cosa posso fare (in CSS) per mantenerli all'interno del frame principale?

Answer 1

aggiungere overflow: hidden al vostro genitore <div> - http://jsfiddle.net/5AVA8/

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
    overflow: hidden; 
} 

Answer 2

Devi 'cancellare il galleggiante', ci sono vari metodi di 'float compensazione'. Alcune soluzioni prevedono CSS solo, la mia soluzione preferita (inviso da alcune persone perché aggiunge markup extra) è quello di aggiungere un 'compensazione div', funziona come segue:

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 
    <div style="clear:both"></div> 
</div> 

vedere il secondo da ultima riga.

Answer 3

Non stai pulendo i galleggianti. Se cambi il tuo codice, risolverà il tuo problema.

.rendering { 
    padding-left:10pt; 
    border-width: 1px; 
    border-style: solid; 
} 
.column { 
    float:left; 
    padding-left:10pt; 
} 

.clear { 
    clear: both; 
} 

<div class="rendering"> 
    <div class="column"> 
     <img class="ImagePlugin" src="some-image"> 
    </div> 
    <div class="column"> 
     <span class="phone">999</span> 
     <span class="name">Assange</span> 
    </div> 

    <div class="clear"></div> 
</div> 

Vedere l'esempio ho creato qui - http://jsfiddle.net/spacebeers/RQNDr/

Per ulteriori informazioni sulla chiara di proprietà - http://css.maxdesign.com.au/floatutorial/