layout liquido con footer e menu a sinistra

**Igor Baldacci** · 17-02-2010, 12:23

Devo realizzare un layout con i div in modo da avere una intestazione superiore (header) una parte centrale suddivisa in due settori: un menu a sinistra (bodyleft) e un settore centrale per i contenuti (bodyright), ed infine un blocco inferiore (footer). Tutto questo in modo che tutta l'altezza sia sempre al 100% e quindi con il footer sempre a fondo pagina.

Tento uno schema per essere ancora più chiaro:

-----------------------
header
-----------------------
| |
| bodyleft | bodyright
| |
------------------------
footer
------------------------

Diciamo che sono riuscito a fare tutto, l'unico problema è nei div centrali (bodyleft e bodyright): riesco a metterli uno accanto all'altro MA NON RIESCO A DARGLI L'ALTEZZA AL 100%, in modo che arrivino giù fino al footer.

Come posso correggere il problema? GRAZIE

Questo il mio CSS

codice:

html, body, form
{
    margin: 0;
    padding: 0;
    height: 100%;
}

#container
{
    min-height: 100%;
    position: relative;
}

#header
{
    height: 90px;
    background-color: #666699;
    padding: 10px;
}

#body
{
    padding-bottom: 40px;
}

#footer
{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px; /* Height of the footer */
    background: #D5D5E3;
}

#content
{
    margin: 0 0 0 225px;
    border: none;
    color: #000000;
    min-height: 100%;
    position: relative;
}

#bodyleft
{
    margin-left: 0px;
    float: left;
    width: 150px;
    background-color: #CFD7D8;
} 

#bodyright
{
    margin-left: 10px;
    float: left;
    width: 650px;
}

Questo il codice HTML:

codice:

<body>
    <form id="form1" runat="server">
    
        <div id="container">
            <div id="header">
              HEADER
            </div>
            <div id="body">
                    <div id="bodyleft">
                          LEFT MENU
                    </div> 
                    <div id="bodyright">
                          CORPO CENTRALE
                     </div> 
                    <div style="clear:both"></div>             
            </div>
            <div id="footer">
              FOOTER
            </div>
        </div>
    </form>
</body>

**rubikdesign** · 17-02-2010, 14:39

Prova a dare un'altezza del 100% al div #body, e non specificare nessun valore di altezza per i #bodyleft e right.
Potrebbe funzionare...

**Igor Baldacci** · 17-02-2010, 15:53

provato... ma non ha funzionato!

frose devo ricorrere alle funzioni javascript per far calcolare l'altezza dei div?

**Mich_** · 17-02-2010, 16:26

Il trucco che cerchi si chiama
False colonne (faux columns)
Se ne e` parlato varie volte, quindi trovi tutte le info necessarie tramite ricerca nel forum; c'e` un riferimento anche tra i "link utili"

**Igor Baldacci** · 17-02-2010, 17:04

GRAZIE!!

Ho studiato i link che ho trovato sulle False Colonne e ho risolto. Per i posteri: ho modificato il css in questo modo:

codice:

#container
{
    min-height: 100%;
    position: relative;
    background-image: url('../Immagini/SfonodMenu.jpg');
    background-repeat: repeat-y;
    background-position: left top;
}

Discussione: layout liquido con footer e menu a sinistra

Strumenti discussione

Ricerca discussione

Visualizza

layout liquido con footer e menu a sinistra

Permessi di invio