div che non assume altezza automatica

ndakota

div che non assume altezza automatica

Ciao a tutti! Ho un problema su cui sbatto la testa da ore (e sono sicuro che sia una cavolata):

Ho un div #loader che dovrebbe contenere al suo interno una serie di div che si spostano tramite animazioni CSS3 a seconda di cosa si preme sul menu (tramite Javascript).

Il problema sta nel fatto che questo div non mi assume un'altezza automaticamente in base al contenuto. Quindi i contenuti si vedono ma il footer che ne sta sotto risulta sotto il div che ha un'altezza pari a 0px.

Quale potrebbe essere il problema? il div contiene altri div posizionati con relative ed è a sua volta posizionato con relative. E ho piazzato div con clear: both dappertutto. Di seguito il codice della parte incriminata

[HTML]<div id="loader">

<div id="home" class="content">
<h1>Title</h1>
<h2>Subtitle</h2>
<div class="info_container">
<div class="info_box left">
<img src="img/analysis.png" alt="analisi siti web" />
<h3>Analisi Siti Web</h3>
<div class="clear"></div>
</div> 
<div class="info_box right">
<img src="img/google_seo.png" alt="Posizionamento Google" />
<h3>Posizionamento sui Motori di Ricerca</h3>
</div> 
<div class="info_box">
<img src="img/sviluppo.png" alt="sviluppo web" />
<h3>Progettazione e Sviluppo web</h3>
</div> 
<div class="clear"></div>
</div> 
<div class="clear"></div>
</div> 
<div class="clear"></div>[/HTML]

E qui i CSS:

#000;
    border-radius: 10px;*/
    z-index: 1;
    transition: all 1.2s ease-in-out;
        -webkit-transition: all 1.2s ease-in-out;
        -moz-transition: all 1.2s ease-in-out;
        -o-transition: all 1.2s ease-in-out;
        transition: all 1.2s ease-in-out;
}

#home {
    position: absolute;
    top: 0;
    opacity: 1;
}

.info_container {
    margin-top: 35px;
}


.info_box {
    width: 33%;
    text-align: center;
    display: inline-block;
    margin: 0 auto;
}

Penso ci sia tutto.. Grazie a chi saprà darmi una mano!!

shad

Sposto in CSS dove credo sia più probabile che tu possa trovare aiuto.

beatofrancesco

height:auto;

su #loader?

lorenzoroma

#loader va bene così, togli {position:absolute;} da #home.

Spiegazione: è l'absolute sul div successivo a che fa si che non venga impostata un'altezza dinamica per.