- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- div che non assume altezza automatica
-
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">
<!-- ************************************** HOME *********************************** -->
<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> <!-- info_box -->
<div class="info_box right">
<img src="img/google_seo.png" alt="Posizionamento Google" />
<h3>Posizionamento sui Motori di Ricerca</h3>
</div> <!-- info_box -->
<div class="info_box">
<img src="img/sviluppo.png" alt="sviluppo web" />
<h3>Progettazione e Sviluppo web</h3>
</div> <!-- info_box -->
<div class="clear"></div>
</div> <!-- info_container -->
<div class="clear"></div>
</div> <!-- home -->
<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!!
-
Sposto in CSS dove credo sia più probabile che tu possa trovare aiuto.
-
height:auto;
su #loader?
-
#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.