ridimensionamento automatico div

[danielebarisano]

Salve ragazzi, ho un problema per completare la grafica del mio sito...
Praticamente devo fare in modo che il div contenuti si ridimensioni automaticamente
in base al contenuto e nn vadi a sovrappore il footer..

Posto il codice:

#contenitore {
position:absolute;
width: 990px;
margin-left: auto;
margin-right: auto;

font-family: Georgia,"Times New Roman", serif;


}

/* Passiamo alla sezione "header":*/



#header {


margin-bottom: 5px;
border:1px solid #000;
height:116px;
width:989px;
background:#999999;
}

#menu1{
background:#999999;
height:270px;
border: 1px solid #000;
margin-top:-6px;
width:989px;
}

#sottoheader{

border:1px solid #000;
margin-top:-1px;
width:989px;
}

/*Passiamo alla sezione centrale "contenuti":*/

#contenuti {


position:absolute;
min-height:710px;

background: white;
border:1px solid #000000;
left:222px;
top:600px;
width:775px;

}

#area1{
float: left;

width:170px;
height:170px;
margin-left:0px;
padding:5px;
margin-right:5px;
}

#area2{
float:right;
border:0;
width:170px;
height:170px;

}


#area4{
border:0;
width:170px;
height:170px;
margin-left:470px;
}

#area1_1{
float: left;
width:230px;
height:170px;
margin-left:0;
padding-top:5px;
margin-right:5px;
}

#area1_2{
float: left;
border:0;
width:130px;
height:80px;
margin-left:0;
padding:5px;
margin-right:5px;
}

#area4_1{
padding:5px;
width:580px;
height:170px;
margin-left:430px;
}


/*Passiamo alla sezione "sinistra":*/

#sinistra {

background: #999999;
border:1px solid #000000;
color:#663300;
float:left;
font-size:18px;
min-height:700px;
top:0px;
margin-right:5px;
max-height:1950px;
height:700px;
padding:5px;
width:200px;
}


#box_header {
background-image: url("../img/bg_top_box.jpg");
/*background-repeat: no-repeat;*/
float:right ;
margin-top: 15px;
width: 671px;
}

#logo {

height:110px;
left:21px;
position:absolute;
top:17px;
width:270px;

}

#box_header_1 {
color: #FF801A;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
line-height: 19px;
margin-top: 15px;
padding-left: 18px;
text-align: right;
text-transform: uppercase;
width: 205px;
}

#footer {

position:absolute;
background: #999999;
border:1px solid black;


left:9px;
bottom:0px;
/*top: 1313px;*/
width:989px;
height:180px;

}

Va tutto bene..tranne contenuti che non si ridimensiona automaticamente e sinistra
che dovrebbe allungarsi come si allunga la sezione contenuti...

Chi mi può aiutare?

[Mich_]

Il problema piu` grosso e` l'uso del posizionamento assoluto. E` una delle cose piu` difficili dei CSS, e non andrebbero usati fino a quando non si e` raggiunta una buona competenza ed eseprienza.
Dovresti rifare il layout senza usare il position

Dovresti farti un giro tra le raccolte di layout (alcuni riferimenti li trovi tra i "link utili") per vedere come hanno risolto i guru.

[danielebarisano]

Se ti posto meglio il codice tu non sapresti darmi una mano?

[Mich_]

Non ho tempo, purtroppo.

Comunque la mia impressione e` che dovresti partire da un layout nuovo.
1. sistema la marcatura (codice HTML) in modo che sia semanticamente corretta e sintatticamente valida (meglio se usi la DTD XHTML 1.0 Strict) - fatti aiutare dal validatore HTML
2. scegli un layout che ti va bene, tra quelli proposti (non guardare i colori, ma solo la disposizione dei blocchi e il comportamento al ridimensionamento
3. applica il layout al tuo contenuto.