Box che 'escono fuori' dal box contenitore

[Gil Mour]

Ho gia affrontato questa cosa diverse volte ma non mi ricordo mai da cosa dipende -.-'

Ho due box:

div#box_main {
  
  margin:0 0 0 190px ;
  border: 1px solid #c0c0c0;
  
  padding: 25px 25px 50px 10px;
  clear:right;
  background-color:#fff;

}

.tpl_selection {
  
  width: 150px;
  height: 150px;
  border: 1px solid black;
  margin: 10px 10px 10px 0;
  float:left;

}

Il codice HTML è questo.

<div id="box_main">
<div class="tpl_selection"></div>
<div class="tpl_selection"></div>
<div class="tpl_selection"></div>
</div>

Il risultato desiderato è che i quadrati definiti da tpl_selection siano disposti orizzontalmente all'interno di box_main. Questo in effetti avviene; solo che, essendo l'unico contenuto di div#box_main, hanno una altezza maggiore e 'strabordano', risultando in parte contenuti ed in parte fuori dal box contenitore.

Come mai?

[Mich_]

Il clear lo devi mettere DOPO i vari blocchi flottati, e PRIMA della fine del contenitore.

Vedi come consiglia fcaldera in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

[Gil Mour]

Grazie..come sempre in questi casi è un problema col clearing.