Ridimensionamento automatico div contenitore

[sharkboy]

Ciao a tutti,
insieme ad un paio di amici ho realizzato un sito web, dedicandomi soprattutto al design css su un idea datami da un grafico che ci sta aiutando.

Il problema che ho è che non riesco a fare in modo che il wrapper centrale si ridimensioni in altezza in base al contenuto.

Questa è la struttura:

container
-> header
---> header_left
---> header_center
---> header_right
-> search
-> wrapper_top
->wrapper
---> wrapper_right
---> wrapper_center
------> wrapper_center_contenuto
---> wrapper_left
-> footer

Questo il foglio di stile:

/* Basics */
body {
background : #FFFFF;
color : #00000;
font : 12px Verdana, Geneva, Arial;
text-align: left;
margin : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;


scrollbar-face-color:#82b6de;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-shadow-color:FFFFFF;
scrollbar-arrow-color:#FFFFFF;
scrollbar-track-color:#FFFFFF;

}

#container {
background: #FFFFFF;
border-bottom : 0px;
border-left : 0px;
border-right : 0px;
border-top : 0px;
margin : 20px auto !important; margin-left: 215;
width : 776px;




}

#header {
background : #FFFFFF url(../img/header_bk.jpg) no-repeat;
height: 111px;
width: : 100%;
margin: 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;


}

#header_left {

height : 100%;
float:left;
width:50%;



}


#header_center {

height : 100%;
float:left;
width:48%;



}


#header_right {

height : 100%;
float:left;
width:2%;


}

#search {
background : #FFFFFF url(../img/search_bk.jpg) no-repeat;
height: 46px;
width: 100%;
margin-top: 2px !important; margin-top: -124px;

padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;

}

#search_center {
width: 750px;
float:left;
}

#wrapper_top {
background : #FFFFFF url(../img/wrapper_top_bk.jpg) no-repeat;
height: 24px;
width: 100%;
margin-top: 2px !important; margin-top: -10px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
}

#wrapper {
width: 100%;
height: 400px;
margin : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
}

#wrapper_left {
background : #FFFFFF url(../img/wrapper_left_bk.jpg);
height : 100%;
float:left;
width:179px;
}

#wrapper_center {
background : #FFFFFF;
height : 100%;
float:left;
width: 572px;
overflow: auto;


#wrapper_center_contenuto {

height : 90%;
width: 95%;
margin-left: 1%;

}


#wrapper_right {
background : #FFFFFF url(../img/wrapper_right_bk.jpg) no-repeat;
height : 100%;
float:left;
width:25px;
}

#footer {
background : #FFFFFF url(../img/footer_bk.jpg) no-repeat;
height: 79px;
width: 100%;
margin : 0px;
padding-bottom : 0px;
padding-left : 0px;
padding-right : 0px;
padding-top : 0px;
}

Ora che vedete il tutto magari si capisce meglio, io vorrei che in base al contenuto di wrapper_left o wrapper_center wrapper aumenti o meno di dimensione, in modo che la parte centrale definita da me wrapper sia dinamica in altezza in base al contenuto.

Avevo provato a mettere l'altezza auto ma non funziona e avevo fatto altre prove.

Mi sapete aiutare?

Il sito è su www.eticambio.it e deve ancora essere finito in alcune parti!

[thomas_anderson]

ciao!
nei CSS il calcolo dell'altezza è dato dalla somma di:
margin-top+border-top+padding-top+height+padding-bottom+border-bottom+margin-bottom
nei box posizionati in modo statico. in molti casi l'altezza dipende dal contenuto inserito. un modo per evitare che l'altezza sia inferiore al dovuto è quello di impostare un'altezza minima con la proprietà 'min-height'. tu hai impostato un altezza di 400px. dovresti vedere se il contenuto massimo che puoi inserire sta in quell'altezza. se usi un linguaggio lato server dovresti dare al div un'altezza diversa in base al numero di elementi contenuti nel div. per esempio, se hai 4 paragrafi, l'algoritmo dovrebbe essere:

se (wrapper.elementi == 4) {
style (wrapper = 'height: 600px; min-height: 600px')
}
else...

[sharkboy]

Innanzitutto grazie!
Io so che il mio wrapper deve essere minimo 400px e in alcuni casi aumenta a 600px fino a un max di 800px.
Io vorrei impostarlo a 400px e vorrei che si allungasse in base al contenuto, ma in modo automatico, senza if o cose del genere.
Si può fare? immaginino di si, molti siti sono così!

[sharkboy]

Anzi il problema è un altro!!!
Fare alzare il wrapper che contiene i tre div wrapper (left,center,right) in base al contenuto di wrapper_center e wrapper_right!

Questo è possibile?

Altrimenti l'unica e cambiare l'altezza in base al contenuto come suggerito, io il css l'ho dentro un file .css esterno, posso mettere lì un if scritto in php?

[thomas_anderson]

ciao!
scusa se ti rispondo solo ora.
si, puoi fare come ti ho detto. con PHP verifichi se il div ha tot numero di elementi, ed in base a quello imposti l'altezza. come esempio puoi prendere Wordpress, che fa la stessa cosa inserendo un'immagine particolare a seconda del tipo di contenuto. ricordati di impostare anche 'min-height'. per es:

#wrapper {
height: 400px;
min-height: 400px; /* altezza = 400px */
}

Algoritmo:

for E in (elementi_wrapper) {
switch (E) {
case 0: ...
}

scusa gli eventuali errori. oppure usa una semplice if-clause. verifica quale va meglio
a livello di velocità di caricamento.

[sharkboy]

Mi rendo conto che con il foglio di stile fatto così, l'unica sia calcolare di volta in volta l'altezza necessaria da dare al wrapper. Il problema però è che in alcune pagine ho ad esempio solo un paragrafo e non 10 elementi per dire, quindi dovrei riuscire a capire di volta in volta quanto è alto il div centrale e dare quell'altezza ai due dv laterali!

Forse, non c'è una soluzione e dovrei adattare il mio sito ad alcuni esempi che ho trovato in rete che funzionano bene e non danno di questi problemi.

Mi dispiace solo aver iniziato questo lavoro con questo metodo che risulta ora sbagliato!

[camionistaxcaso]

Io ho un problema simile: vorrei che i livelli "contenitori" si ridimensionassero in base al contenuto che ci viene inserito dentro, questo ovviamente per i contenuti variabili. Possibile che quello che ha inventato i CSS non ci ha pensato? BAH mi sa che ripiegherò anche sta volta sulle tabelle.

[ResianTaxidrive]

Il problema non mi è del tutto chiaro anche perchè quel link che hai postato non corrisponde alla struttura che hai descritto qui nel forum.
Solitamente non si mettono delle altezze agli oggetti che hanno del contenuto variabile, gli oggetti adattano la loro dimensione in base al contenuto che hanno.

[camionistaxcaso]

Originariamente inviato da ResianTaxidrive
Il problema non mi è del tutto chiaro anche perchè quel link che hai postato non corrisponde alla struttura che hai descritto qui nel forum.
Solitamente non si mettono delle altezze agli oggetti che hanno del contenuto variabile, gli oggetti adattano la loro dimensione in base al contenuto che hanno.

Il post risale al 2007, nel frattempo avrà cambiato tutto...avrà ripiegato anche lui sulle tabelle...

[ResianTaxidrive]

Azz non mi ero accorta della data vecchia, camionista, perché hai risposto a un post così vecchio? non si fa, io ho perso tempo a guardare il suo codice e questo per niente.