css 2 colonne + footer capriccioso

corvo

css 2 colonne + footer capriccioso

Salve,
supponendo si avere un classico layout header, due colonne + il footer.
the problem is:
diciamo (ma non è così) che l'altezza della DX puo variare, quella di sinistra è fissa. Ora quando quella di DX è più alta il footer si posiziona correttamente sotto a tutto, quando è più corta il footer si posizione immediatamente sotto la colonna di dx sovrapponendosi a quella di SX.... inoltre vorrei evitare di usare min-height per non aver problemi con explorer

Nella sostanza come si fa a far posizionare il footer sempre e comunque sotto la tabella più alta?

ESEMPIO:
Allora vorrei occupare il 90% della pagina e centrare il tutto

il css è questo, ho cancellato colori ecc.. inutili per l'esempio

#header{ questo va per fatti suoi
position: absolute;
top: 0px;
left: 5%;
width:90%;
}

poi metto il contenitore, dentro ci andranno colonna di sx, di Dx e sotto il footer

#contenitore{ suppongo che l'header si alto 180px
position:absolute;
top: 180px;
width:90%;
left: 5%;
}

#sinistra{ nel contenitore e largo 230px
position:absolute;
top:0px;
left: 0px;
width: 230px;
padding: 0px;
}

#destra { voglio un ulteriore distanza di 15px da sinistra
margin-left:245px;
}

#footer { che ci metto per non farlo sovrapporre

}

Spero di essermi spiegato. Mi andrebbe bene anche una soluzione in cui il footer è fuori dal contenitore

Grazie mille (inizio a rimpiangere le tabelle :-))

edit: aggiugo anche laccattiemmelle per far capire meglio il tutto ,vorrei mettere prima il contenuto di destra e poi sinistra

<div id="header"> header</div>
<div id="contenitore">
<div id="destra"> contenuto destra</div>
<div id="sinistra"> contenuto sinistra</div>
<div id="footer"> contenuto footer</div>
</div>

massy

Metti le due colonne flottanti ed il footer con la proprietà:
clear:left;

corvo

Prima di postare avevo letto il tuo tutorial :-))

La cosa funzionerebbe con un layout standard ma io vorrei fare una passo in più:
larghezza contenitore in %
colonna di sinistra a larghezza fissa
colonna di destra che prende lo spazio restante
inoltre, ciliegina sulla torta, vorrei scrivere prima il codice di destra e poi quello di sinistra ....

Il tutto "funzionerebbe" se do alla colonna di sx
position:absolute;
top:0px;

Ma se do questi valori la colonna di sx si allinea correttamente, il footer però si aggancia direttamente solo alla colonna di dx sovrapponendosi a quella di sx.

il.rappo

#sinistra{
position:relative;
top:0px;
left: 0px;
width: 230px;
padding: 0px;
clear:both;
}

#destra {
margin-left:245px;
position:absolute;
}

Edit: così risolve solo se sx è più grande di dx

corvo

@Il_Rappo said:

Edit: così risolve solo se sx è più grande di dx
E' più complicato di quello che sembra ehehehehe

Il vero problema è Firefox, Explorer ed il resto...

l'unica brutta soluzione che ho trovato mi pare resti

mettere DX

min-height: 700px;
height: auto !important;
height: 700px;

Dove 700px è l'altezza max che potrebbe avere la colonna di sx

massy


<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
    <head>
        <style type="text/css">
            body {text-align:center;}
            #contenitore{      width:90%; margin:0 auto; text-align:left; }
            #header{  height:180px; }
            #sinistra{  width: 230px; float:left; height:200px; }
            #destra { position:relative; margin-left:230px; padding-left:15px; }
            #footer { clear:left; }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="header"> header</div>
            <div id="sinistra"> contenuto sinistra</div>
            <div id="destra">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
            <div id="footer"> contenuto footer</div>
        </div>
    </body>
</html>

Se ho capito cosa ti serve....

corvo

Questo è uno schema classico, io vorrei fare questo invece:


<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it">
    <head>
        <style type="text/css">
            body {text-align:center;}
            #contenitore{      width:90%; margin:0 auto; text-align:left; }
            #header{  height:180px; }
            #sinistra{  width: 230px; float:left; height:200px; }
            #destra { position:relative; margin-left:230px; padding-left:15px; }
            #footer { clear:left; }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="header"> header</div>
            <div id="destra">contenuto destra </div>
	    <div id="sinistra"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</div>
            <div id="footer"> contenuto footer</div>
        </div>
    </body>
</html>

E' un capriccio ma vorrei scrivere prima la colonna di destra per due motivi:

La colonna di sx ha degli elementi esterni che potrebbero caricarsi lentamente
Preferisco che zio Google legga prima quello che è scritto a dex

Puoi vedere che la colonna di sx "scivola sotto a quella di dx"... se metto un position:absolute;top:0; nello style di SX è ok ma il footer lo sovrascrive.

Grazie mille cmq per la partecipazione alle mie elucubrazioni mentali.