layout 2 colonne "fisso"

**m1ch3la** · 20-03-2007, 16:52

Ciao,
ho un problema con un layout a 2 colonne che non riesco a gestire.
Le due colonne hanno sfondi diversi che prendono tutta la parte di pagina del livello (es 50% sfondo 1 - 50% sfondo 2).
Nella colonna di sinistra ho un livello con float:right con larghezza fissa (540px

Nella colonna di destra ho un livello con float:left con larghezza fissa (420px

In questo modo i contenuti dei due livelli appaiono come un unico box centrato.
Problema: se ridimensiono la finestra, il livello a destra ad un certo punto scivola in basso (in ie 6)...
Invece vorrei che rimanesse al suo posto!
Con firefox non si muove, però se ridimensiono la finestra, poi scorro con la barra orizzontale, vedo che a destra non mette lo sfondo oltre al livello con dimensione fissa.

Il risultato che vorrei ottenere è quello che avrei con una tabella larga 100% con due celle 50%, ma se posso evitare le tabelle è meglio...

Il codice della pagina è questo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it">
<head>
<title>prova 2 colonne</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="prova 2 colonne" />
<meta name="description" content="prova 2 colonne" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Michela" />
<meta name="generator" content="EditPlus" />

<style type="text/css" title="">

body {
padding: 0px;
margin: 0px;
background-color: #10202F; /* sfondo bottom*/
color: white;
text-align:left;
font-family: Arial, sans-serif;
font-weight: normal;
font-size:11px;
font-style: normal;
line-height: 1.4em;
}

div {
padding: 0px;
margin: 0px;
}

.clearBoth {
clear:both;
}

#colonnaSn {
float:left;
background-color: green;
width:55%;
}

#colonnaDx {
float:left;
background-color: red;
width:45%;
}

#contenutoSn {
width: 540px;
float:right;
text-align:right;
border: 1px solid white;
}

#contenutoDx {
float:left;
width: 420px;
text-align:left;
border: 1px solid white;
}

</style>

</head>

<body>
<div class="clearBoth"></div>
<div id="colonnaSn">
<div id="contenutoSn">contenuto sinistra

</div>
<div class="clearBoth"></div>
</div>
<div id="colonnaDx">
<div id="contenutoDx">contenuto destra

</div>
<div class="clearBoth"></div>
</div>
<div class="clearBoth"></div>
</body>
</html>

qualche idea?
grazie,
Michela

**m1ch3la** · 21-03-2007, 10:17

nessuna risposta....
insomma non c'è modi di far restare due livelli affiancati anche restringendo la finestra, come se fosse una tabella?
Michela

**ricman** · 21-03-2007, 10:35

Originariamente inviato da m1ch3la
non c'è modi di far restare due livelli affiancati anche restringendo la finestra, come se fosse una tabella?

Mi viene a mente che potresti infilarli dentro un div di dimensione fissa.
Una cosa tipo
<div id="fisso">
<div id="sx"></div>
<div id="dx"></div>
</div>

**m1ch3la** · 21-03-2007, 11:29

il div fisso non posso farlo perché c'è lo sfondo che deve prendere tutta la pagina: avevo ovviato "fissando" la dimensione del livello a sinistra (55%), e lasciando libera quello di destra.
Il livello di sinistra ha lo sfondo che occupa circa la metà pagina a sinistra, il body ha lo sfondo che si vede solo nella metà a destra...
ma così quando ridimensiono la finestra, il livello a destra scivola in basso....
Michela

**salasir** · 21-03-2007, 12:21

Una cosa così ?

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it">
<head>
<title>prova 2 colonne</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="prova 2 colonne" />
<meta name="description" content="prova 2 colonne" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Michela" />
<meta name="generator" content="EditPlus" />

<style type="text/css" title="">

body {
padding: 0px;
margin: 0px;
background-color: #10202F; /* sfondo bottom*/
color: white;
text-align:left;
font-family: Arial, sans-serif;
font-weight: normal;
font-size:11px;
font-style: normal;
line-height: 1.4em;
}

div {
padding: 0px;
margin: 0px;
}

.clearBoth {
clear:both;
}

#colonnaSn {
float:left;
background-color: green;
width:55%;
}

#colonnaDx {
float:left;
background-color: red;
width:45%;
}

#contenutoSn {
float:right;
width: 98%;
text-align:right;
border: 1px solid white;
}

#contenutoDx {
float:left;
width: 98%;
text-align:left;
border: 1px solid white;
}

</style>

</head>

<body>
<div id="colonnaSn">
<div id="contenutoSn">contenuto sinistra



</div>
</div>
<div id="colonnaDx">
<div id="contenutoDx">contenuto destra



</div>
</div>
</body>
</html>

**m1ch3la** · 21-03-2007, 13:49

no, perché quando ridimensiono la pagina, i due div si sovrappongono...
Michela

**salasir** · 21-03-2007, 14:19

:master:

Allora probabilmente non ho capito cosa vuoi.

Quando ho provato, ridimensionando la pagina non si sovrappongono ma si riducono in larghezza ...

**m1ch3la** · 21-03-2007, 14:24

perché nell'esempio, molto semplificato, non ci sono immagini nei due livelli: se aggiungi un'immagine vedrai uno strano effetto quando riduci la finestra!
Michela

**ricman** · 21-03-2007, 15:56

Originariamente inviato da m1ch3la
perché nell'esempio, molto semplificato, non ci sono immagini nei due livelli: se aggiungi un'immagine vedrai uno strano effetto quando riduci la finestra!

Non è che hai un link da postare?
Anch'io ho copiato il codice di salasir... poi ho pure aggiunto due piccole foto insieme ai contenuti... La barra compare solo quando il browser diventa più "corto" dei contenuti (foto+testi). Dov'è il problema?

**m1ch3la** · 22-03-2007, 10:32

mi sembrava di aver risposto ieri, ma non vedo la mia risposta...boh!
comunque: con questo codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="it">
<head>
<title>prova 2 colonne</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="prova 2 colonne" />
<meta name="description" content="prova 2 colonne" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="Michela" />
<meta name="generator" content="EditPlus" />

<style type="text/css" title="">

body {
padding: 0px;
margin: 0px;
background-color: #10202F; /* sfondo bottom*/
color: white;
text-align:left;
font-family: Arial, sans-serif;
font-weight: normal;
font-size:11px;
font-style: normal;
line-height: 1.4em;
}

div {
padding: 0px;
margin: 0px;
}

.clearBoth {
clear:both;
}

#colonnaSn {
float:left;
background-color: green;
width:55%;
}

#colonnaDx {
float:left;
background-color: red;
width:45%;
}

#contenutoSn {
float:right;
width: 98%;
text-align:right;
border: 1px solid white;
}

#contenutoDx {
float:left;
width: 98%;
text-align:left;
border: 1px solid white;
}

</style>

</head>

<body>
<div id="colonnaSn">
<div id="contenutoSn">contenuto sinistra



qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo 
</div>
</div>
<div id="colonnaDx">
<div id="contenutoDx">

contenuto destra

qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo qui ci va del testo 
</div>
</div>
</body>
</html>

succede questo:

ie 6: il livello a destra scivola sotto

firefox 2.0 : se ridimensiono la finestra più della dimensione delle 2 immagini, appare la barra di scorrimento, ma sparisce lo sfondo a destra, fuori dal livello contenutoDx

a voi non succede così?
Michela

Discussione: layout 2 colonne "fisso"

Strumenti discussione

Ricerca discussione

Visualizza

layout 2 colonne "fisso"

Permessi di invio