• User Newbie

    Posionamento DIV

    Posizionamenti alternativi livelli
    Salve a tutti,

    ho un layout tipico: header, sezione sinistra, parte centrale, parte destra e footer.
    Normalmente si il rispettivo HTML dovrebbe essere:

    <div id="container">

    <div id="header">header</div>
    <div id="sinistra">sinistra</div>
    <div id="centrale">centrale</div>
    <div id="destra">destra</div>
    <div id="footer">footer </div>

    </div>

    a me invece servirebbe sapere qual'è la giusta sintassi CSS per visualizzare nel codice HTML i div in questo ordine:

    <div id="container">

    <div id="centrale">centrale</div>
    <div id="destra">destra</div>
    <div id="sinistra">sinistra</div>
    <div id="footer">footer </div>
    <div id="header">header</div>

    </div>

    E' da sapere che l'altezza del div container è variabile...quindi non devo applicare dimensioni fisse.
    Ho provato con i posizionamenti assoluti, ma il risultato non è quello desiderato.
    Comunque vi posto anche il mio css:

    *div#container{ *
    margin:0px auto;
    width:960px;
    position:relative;
    background:#0f0;
    overflow:hidden;
    }

    div#header{
    background:#06f;
    overflow:hidden;
    margin:0 auto;
    height:250px;
    }

    div#sinistra{
    *position: absolute; *
    *top: 250px; *
    left: 0;
    width: 225px;
    background:#ddd;
    overflow:hidden
    }

    div#destra{
    position: absolute;
    top: 250px;
    right: 0;
    width: 255px;
    background:#aaa;
    overflow:hidden
    }

    div#centrale{
    position: absolute;
    top: 250px;
    left:225px;
    width:480px;
    overflow:hidden;
    background:#0f0
    }

    div#footer{
    width:960px;
    background:#ff0;
    overflow:hidden;
    }

    Mi potere aiutare per favore???

    Vi ringrazio in anticipo.


  • User Attivo

    in effetti che io sappia per avere il container prima delle colonne laterali l'unica è proprio il posizionamento assoluto...
    In cosa non ti va bene il risultato che ottinei? Se il problema è l'altezza potrebbe venirti in aiuto un js... dovresti passare al container l'altezza delle colonne laterali in modo da non farle collassare nel caso che il contenuto centrale sia più corto delle colonne laterali.
    Con jQuery la cosa dovrebbe essere fattibile con height
    docs.jquery.com/CSS/height
    che ti permette sia di recuperare l'altezza di un elemento del dom che settarla