[XHTML-CSS] Float e Padding

[Iwk_Batterio]

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

<div id="contenuto">
       <div id="menu"></div>
       <div id="posts"></div>
       <br class="clear" />      
</div>

Il relativo CSS:

.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

[Federix]

Sposto su CSS

[Mich_]

La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin

In IE (quirk mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Quindi aggiungendo un padding, aumenti la larghezza totale (nei browser standard), che quindi non ci sta piu` dentro il contenitore.

[pop killer]

Originariamente inviato da Mich_
La larghezza totale di un blocco (browser standard) e` data da:
margin + border + padding + width + padding + border + margin

In IE (quirk mode) invece e` data da:
margin + width + margin (border e padding fanno parte di width)

Quindi aggiungendo un padding, aumenti la larghezza totale (nei browser standard), che quindi non ci sta piu` dentro il contenitore.

Pero' come soluzione si puo' pure fare (per esempio)
#container {width: 100%; background-color:green;}
#subcontainer {width: 100%; border:1px solid black; padding:5px;}
e si mettono cosi'
<div id="container">
<div id="subcontainer">Testo</div>
</div>
in questo modo il subcontainer prende width 100% all'interno di container e quindi si "stringe" in base ai suoi attributi lasciando inalterata la width di container.

[Iwk_Batterio]

Chiarissimi, grazie mille!

Però ora c'è un problema, seguendo l'esempio di pop killer:

se imposto il width di "subcontainer" a tipo il 70% come faccio a centrarlo all'interno del box "container"?

Con IE basta mettere nel css di "conteiner" text-align: center; ma questo sembra non funzionare con IE

Come posso sistemare?

Grazie

[pop killer]

margin:auto; a subcontainer, oppure

text-align:center; a container e
text-align:left; a subcontainer

[Iwk_Batterio]

Ah ovviamente prima volevo scrivere:

Con IE basta mettere nel css di "conteiner" text-align: center; ma questo sembra non funzionare con Firefox

Grazie pop, margin:auto; funziona perfettamente, il secondo metodo, invece, solo con IE