Altezza div in base al contenuto

alanshore

Altezza div in base al contenuto

Buongiorno,
premetto che ho già provato a cercare un thread simile sia su questo forum che sui gruppi usenet senza trovare riscontro...
Ho il seguente codice xhtml:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "rimosso"> 
<html>
<head>
       <link rel="stylesheet" type="text/css" href="../css/main.css">
</head>
<body>

<div id="corpo">
       <div id="testa"></div>
       <div id="contenuto">
               <div id="nav">
                       <a href="#">Homepage</a>
                       <a href="#">Homepage</a>
                       <a href="#">Homepage</a>
                       <a href="#">Homepage</a>
               </div>
               <div id="pippo">
                       <p>test<br>test<br>test</p>
               </div>

       <div class="clearfix"></div>
       </div>
       <div id="piede"></div>
</div>
</body>
</html>

mentre il codice ccs è il seguente:


#corpo{ 
        width : 895px; 
        margin-left : auto; 
        margin-right : auto; } 
#testa{ 
        width : 895px; 
        height : 85px; 
        margin-top : 20px; 
        background-image : url('../img/corpo_testa.png'); 
        background-position : left top; 
        background-repeat : no-repeat; } 
#contenuto{ 
        position                                : relative; 
        height                                  : auto; 
        width                                   : 895px; 
        background-image                : url('../img/corpo_corpo.png'); 
        background-position             : left top; 
        background-repeat               : repeat-y; } 
#piede{ 
        width                                   : 895px; 
        height                                  : 39px; 
        background-image                : url('../img/corpo_piede.png'); 
        background-position             : left top; 
        background-repeat               : no-repeat; }  #nav{ 
        position                                : relative; 
        float                                   : left; 
        width                                   : 250px; }  #pippo{ 
        position                                : relative; 
        float                                   : left; 
        width                                   : 600px; } 

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

Il problema è che l'altezza nè del div nav e nè del div pipposi adatta automaticamente al contenuto che si sovrappone, addirittura al div piede.
Ho provato ad impostare il valore height : auto; senza ottenere alcun successo.
Qualcuno è in grado di dirmi dove sbaglio?
Grazie,
Alan.

meryk

...sarà che senza immagini, non riesco a cogliere il problema... ma provando il codice si ridimensiona e non si sovrappone, riesci a spiegarti meglio?

alanshore

Ciao e grazie per avermi risposto.
Ho provato ad inserire un immagine ma mi da errore, se vuoi qui trovi un screenshot di quello che mi seccude...
mdbsas.it/tmp/immagine.jpg
(ovviamente devi aggiungere h t t p : / / w . w . w)
Grazie ancora,
AS