padding con width: 100%

[99caos]

Non ricordo come si fa:

html:

<div id='colonna'>
 <div class='box'>
  <div class='contenuto'>
   
  </div>
 </div>
</div>

css:

#colonna { width: 200px; }
.box { width: 100%; }
.contenuto { width: 100%; padding: 10px; }

ovviamente il contenuto sborda dal box contenitore, non voglio specificare il width del contenuto in pixel, come fare?

[fcaldera]

gli elementi blocco si espandono già fin quando è possibile quindi

.contenuto { padding: 10px; }

è sufficiente

[99caos]

nel protare l'esempio ho omesso dei particolari.
Forse incidono più di quanto pensi.

Adesso non ricordo tutto perchè non sono a lavoro ma dovrebbe essere qualcosa di simile:

#colonna { overflow: visible; float; left; position: relative; }
.box { bottom-margin: 20px; overflow: visible; float: left; position: relative; }

forse ci sono altre regole css, ma in linea di massima dovrebbero essere queste.
servono per gestire l'overflow di contenitori che contengono elementi float.

[99caos]

allora:
la definizione completa di .contenuto è questa:

.contenuto { padding: 10px; text-align: center; overflow: visible; float: left; }

ho omesso width, come potete vedere ma i problemi derivano da float.

se scrivo così mi vengono rispettati i padding che ho impostato ma ovviamente, essendo float l'elemento, questo si estende solo per la larghezza del suo contenuto.

ma se tolgo float da .contenuto, esso si estenderà si per la larghezza del suo genitore ma non vengono più rispettati i padding-bottom.

[99caos]

nessuno può aiutarmi?

[99caos]

non ho potuto fare a meno di inserire un elemento che faccia da clear alla fine dei float:

.clear { clear: both; margin: 0; padding: 0; height: 1px; }