impostare altezza automatica div

[pape86]

Ciao a tutti!
non riesco a fare in modo che un div si estenda in altezza in modo da contenere tutto il suo contenuto (e quindi che tutto il contenuto abbia lo sfondo del div).
Mi spiego meglio:
ho 8 tabelle, tutte della stessa misura, che devo visualizzare su una pagina in modo che vengano fuori due colonne con due tabelle per riga, così:
____________
| |
| TAB1 TAB2 |
| TAB3 TAB4 |
| TAB5 TAB6 |
| TAB7 TAB8 |
|____________|

Quella specie di cornice e il div in questione, a cui ho assegnato id=divSup, mentre le 8 tabelle hanno id=tab1, id=tab2, ecc..

Ho creato questi CSS:

#divSup {
width:100%;
height:2500px;
background-color:#75DB4B;
}

#tab1, #tab3, #tab5, #tab7 {
width:380px;
height:600px;
position:relative;
top:20px;
left:1%;
float:left;
}

#tab2, #tab4, #tab6, #tab8 {
width:380px;
height:600px;
position:relative;
top:20px;
right:1%;
float:right;
}

Il problema è che non dovrei specificare l'altezza di ogni tabella (600px) e l'altezza totale del div (2500px=600px*4 + 100px di margine).
Se non specifico le altezze il divSup e metto height=auto mi viene alto pochi pixel e le tabelle escono fuori.
In teoria, l'altezza del div contenitore non dovrebbe adattarsi al suo contenuto?

Mi sono proprio perso...

[Mich_]

Probabilmente ti manca solo un clear alla fine del contenitore (il #divSup), come suggerito in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float

PS: al posto del position e dei relativi top, left e right, potrebbe essere meglio usare i margini

[pape86]

Ho provato a effettuare le modifiche che mi hai consigliato, ma non è cambiato molto: il divSup si un po'allungato, ma le tabelle restano sempre al di sotto di quello.
Penso che il problema sia a monte.
Allora, io ho usato il trucchetto del divSup per potergli assegnare l'altezza che volevo, ma alla fine questa cosa non è molto giusta, specie se ridimensiono la pagina e le tabelle si allungano!

La parte essenziale del layout del mio sito è questo:

* {
margin:0;
border:0;
padding:0;
}

body {
margin: 23px;
text-align: center;
background: url(../image/linea.png) repeat;
color: #000000;
}
/** questo div fa da contenitore alla pagina **/
#container {
background: url(../image/erba.png) repeat;
color: #05052d;
border: 1px solid gray;
}

#header {
padding: 1.5em;
background: url(../image/erba.png) repeat;
}

#navigation {
float: left; /* faccio flottare il div a sinistra */
width: 18%; /* larghezza del div */
background-color: #fafad2;
color: #05052d;
border-right: 1px solid gray;
}

#extra {
float: right; /* faccio flottare il div a destra */
width: 18%; /* larghezza del div */
background-color: #fafad2;
color: #05052d;
border-left: 1px solid gray;
}

#content {
margin-right: 18%; /* margine pari alla larghezza del div#destro */
margin-left: 18%; /* margine pari alla larghezza del div#sinistro */
padding: 10px;
color: #0a0a0a;
background-color:#75DB4B;
border-left: 1px solid gray;
border-right: 1px solid gray;
}

#footer {
clear: both; /*importante al fine di far cessare il float degli elementi superiori*/
padding: 0.5em;
background: url(../image/linea.png) repeat;
color: #000;
border-top: 1px solid gray;
}

NB: in pratica il contenuto del sito (quindi anche le 8 tabelle della pagina in questione) è all'interno del div#content.

Il problema è questo:
con lo stesso layout, se all'interno del div#content metto paragrafi con del testo o altro contenuto, l'altezza del div si adatta al suo contenuto, (e quindi si allunga e ho uno sfondo corretto); in questa altra pagina che sto creando, invece, non è così.

La situazione è questa:
...
<div id="content">
<div style="float:left; margin:auto;">
<table></table>
<table></table>
<table></table>
<table></table>
</div>
<div style="float:right; margin:auto;">
<table></table>
<table></table>
<table></table>
<table></table>
</div>
</div>
...

Con questa struttura (quindi, senza divSup, o altri CSS, se non quelli del layout) il mio div#content viene alto pochi px e le tabelle vengo visualizzate sotto e prendono lo sfondo del dvi#container e non del div#content.

Spero di essermi spiegato...è un casino, lo so, ma non riesco a venirne fuori!
mi sono letto più volte tutte le guide sui css e anche un libro html/css, ma proprio non riesco a mandarli giù sti CSS!

[Mich_]

Se in una struttura di questo tipo:

HTML:
<div id="conten">
  <div id="sin">sinistro</div>
  <div id="des">destro</div>
</div>

CSS:
#conten {
  width: ...;
  background: red;
}
#conten div {
  float: left;
  width: 49.9%;
  background: blue;
}

il rosso non copre tutto lo spazio dei blu, c'e` un errore di clearing.

Ci sono alcuni metodi per fare in modo che il rosso si comporti nel modo voluto, e sono riportati nel forum (consiglio una ricerca). Io avevo consigliato il "fabclearing", che consiste nel dare un clear all'oggetto #conten:after (che pero` deve avere un po' di consistenza e di contenuto, altrimenti non viene utilizzato).

[pape86]

Originariamente inviato da Mich_
Ci sono alcuni metodi per fare in modo che il rosso si comporti nel modo voluto, e sono riportati nel forum (consiglio una ricerca). Io avevo consigliato il "fabclearing", che consiste nel dare un clear all'oggetto #conten:after (che pero` deve avere un po' di consistenza e di contenuto, altrimenti non viene utilizzato).

Annnn...ho capito finalmente! ci sono riuscito!
..bastava aggiungere al mio div#content questo pezzo di codice css:

#content:after {
display: block;
visibility: hidden;
content: ".";
height: 0;
clear: both;
}

Ottimo! penso anche di aver capito come funziona: in pratica il contenuto a cui ti riferivi non è altro che un punto (.), che però, giustamente, viene nascosto. Il tutto è messo alla fine del div in questione. Geniale!

grazie mille!!