• User

    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!!


  • Moderatore

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


  • User Attivo

    height:auto;

    su #loader?


  • Super User

    #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.