Domanda banale (?) sui div

[frinkia]

Ciao a tutti,

vorrei fare in modo che un div abbia la dimensione variabile in base al suo contenuto. E' possibile?

Ho una table, e vorrei metterci intorno un div che la contiene, adattandosi alla dimensione della table.

E' possibile?

[andrea.paiola]

In effetti è una domanda banale
Il comortamento di default dei div è proprio quello.
Basta che non dai altezza e larghezza al div e dovresti essere a posto.

Non ti chiedo perchè metti una tabella dentro un div che è meglio

[frinkia]

Puo' darsi che sotto Internet Explorer il comportamento sia quello, ma e' sbagliato. Sotto Firefox infatti infatti il DIV occupa il 100% dello spazio disponibile orizzontalmente come mi aspetto.

PS: per quanto riguarda la tabella dentro al div.. mi serve visualizzare dei dati tabellari, molto semplice. Non uso le tabelle per il layout da alcuni anni

[andrea.paiola]

per height:
il valore auto (che è quello di defalt) è in base ai contenuti

per width:
per gli elementi di blocco (come i div) il valore auto indica che l'elemento deve allargarsi fino ad occupare il 100% dello spazio (margini esclusi ovviamente)
per gli elementi rimpiazzati (con dimensioni già definite al difuori dei CSS, come le immagini per esempio) il valore auto specifica che devono tenere quelle dimensioni

grazie per avermi dato la possibilità di ripassare le basi

[frinkia]

Sono veramente felice di averti dato la possibilita' di ripassare le basi, probabilmente ne avevi bisogno.

Ora che l'hai fatto e magari ti ricordi qualcosa, potresti cortesemente rispondere alla mia domanda?

Il seguente codice visualizza un div largo il 100% dell'elemento padre. Questo non e' quello che voglio.

<div style="border: solid 1px black; background-color: red;">


Testo prima della tabella</p>
<table>
 <thead>
 <tr>
  <th>Colonna 1</td>
  <th>Colonna 2</td>
  <th>Colonna 3</td>
 </tr>
 </thead>
 <tbody>
 <tr>
  <td>Prova riga 2 1</td>
  <td>Prova riga 2 2</td>
  <td>Prova riga 2 3</td>
 </tr>
 <tr>
  <td>Prova riga 2 1</td>
  <td>Prova riga 2 2</td>
  <td>Prova riga 2 3</td>
 </tr>
 </tbody>
</table>


Testo dopo della tabella</p>
</div>

Il seguente codice fa esattamente la stessa cosa, mentre io vorrei che il div si adattasse alla larghezza massima degli elementi che contiene.

<div style="width: auto; border: solid 1px black; background-color: red;">
...
</div>

[andrea.paiola]

Originariamente inviato da frinkia
Sono veramente felice di averti dato la possibilita' di ripassare le basi, probabilmente ne avevi bisogno.

ce ne è sempre bisogno

Ora che l'hai fatto e magari ti ricordi qualcosa, potresti cortesemente rispondere alla mia domanda?

Il seguente codice visualizza un div largo il 100% dell'elemento padre. Questo non e' quello che voglio.


Il seguente codice fa esattamente la stessa cosa, mentre io vorrei che il div si adattasse alla larghezza massima degli elementi che contiene.

specifica la larghezza (%, em, px, cm, pollici, ecc ecc)
non è contemplato quello che chiedi

[andrea.paiola]

i box floattanti si espandono a seconda del loro contenuto, puoi renderlo float?