problema con float left

[Progeny]

codice CSS:

div.tab_box {
  padding-bottom: 5px;
  border-bottom: 1px solid #BCD2E6;
}

div.tab_box h4 {
  background: url(../images/css/tab/tab2.png) no-repeat;
  border-bottom: 1px solid #BCD2E6;
  font-size: 100%;
  line-height: 30px;
  text-indent: 10px;
}

div.tab_box h4:hover {
  color: #FF9C00;
  background: url(../images/css/tab/tab1.png) no-repeat;
} 

codice HTML:

<div class="tab_box" style="float: left;"><h4>Segno zodiacale</h4>
  <div>
    [img]images/zodiac/<?php echo($zodiac['file']); ?>[/img]
    

<?php echo($zodiac['sign']); ?></p>
  </div>
</div>

<div class="tab_box" style="float: left;"><h4>Descrizione</h4>
  <div>
    

<?php echo(nl2br(htmlentities($profile['description']))); ?></p>
  </div>
</div>

facendo così il layout viene tutto "sballato"... non ho proprio idea del perchè... qualcuno saprebbe darmi consigli?

[fcaldera]

Dovresti spiegare in cosa consiste lo "sballamento" e cosa invece vorresti ottenere e in quali browser si verifica il problema.

[Progeny]

il problema è che gli elementi venivano sovrapposti con quelli sottostanti, ho risolto usando clear:both o meglio

/* Float Container */
.floatcontainer:after {
  content: ".";
  display: block;
  height: 0;
  font-size:0;
  clear: both;
  visibility:hidden;
}
.floatcontainer { display: inline-block; }
/* Hides from IE Mac \*/
* html .floatcontainer { height: 1%; }
.floatcontainer { display:block; }
/* End Hack */ 

<div class="floatcontainer">

<div class="tab_box" style="float: left; width: 250px;"><h4>Segno zodiacale</h4>
  <div>
    [img]images/zodiac/<?php echo($zodiac['file']); ?>[/img]
    

<?php echo($zodiac['sign']); ?></p>
  </div>
</div>

<div class="tab_box" style="float: right;"><h4>Descrizione</h4>
  <div>
    

<?php echo(nl2br(htmlentities($profile['description']))); ?></p>
  </div>
</div>

</div>