Ho un problema che mi fa impazzire, è presto spiegato:

codice:
<div id="contenuto">
       <div id="menu"></div>
       <div id="posts"></div>
       <br class="clear" />      
</div>
Il relativo CSS:

codice:
.clear {
  clear : left;
}

#contenuto {
  background-image : url(images/struttura/contenuto.jpg);
  width : 830px;
}

#menu {
  background-image : url(images/struttura/menu.jpg);
  width : 138px;
  float : left;
}

#posts {
  background-image : url(images/struttura/posts.jpg);
  width : 692px;
  float : left;
}
Così ho un box "contenuto" che contiene due box "menu" e "posts" uno a fianco all'altro. I box nel caso ci sia del testo al loro interno si allungano verticalmente senza alcun problema.

I casini nascono quando inserisco l'attributo css padding a #menu. Sembra che il float non funzioni più: il box "posts" viene spostato sotto a menu. Perchè?? Non ha senso... come facciamo a mettere un padding su "menu" senza che venga sballato tutto?

Grazie