Problema layout a tre colonne

**wedtaur** · 20-07-2004, 01:03

Il layout è visualizzato correttamente con Mozilla Firebird a differenza di IExplorer.
Il problema è che in IE c'è un margine laterale delle due colonne flottanti più grande del dovuto!
Vi prego aiutatemi, sto impazzendo!

Vi riporto il CSS:

codice:

#container {
	width: 962px;
	height: 700px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 4px;
	padding-right: 4px;
	background-color: #F0F0F0;
	background-image: url(container.gif);
	background-repeat: repeat-y;
	text-align: left;
}

#nav_bar {
	width: 100%;
	height: 18px;
	border-top: solid black 1px;
	border-bottom: solid black 0px;
	background-image: url(nav_bar.gif);
	background-repeat: repeat-x;
}

#container_center {
	width: 468px;
	margin-left: 316px;
	margin-right: 176px;
	border: solid 1px black;
}

#container_left {
	float: left;
	width: 300px;
	margin-left: 7px;
	border: solid 1px black;
}

#container_right {
	float: right;
	width: 160px;
	margin-right: 7px;
	border: solid 1px black;
}

Ed il codice della pagina:

codice:

<div id="container">
<div id="nav_bar"></div>
<div id="container_left"></div>
<div id="container_right"></div>
<div id="container_center"></div>
</div>

**wedtaur** · 20-07-2004, 01:05

Come appare su Mozilla Firebird:

**wedtaur** · 20-07-2004, 01:06

Come appare su Internet Explorer:

**Mutato** · 20-07-2004, 02:12

Cerca IE + boxmodel + hacking.

**ptransidico** · 20-07-2004, 08:55

ciao
Tieni presente che explorer per gli elementi con il float raddoppia
il margine (http://www.positioniseverything.net/...ed-margin.html)
Puoi rislovere il tutto usando un commento condizionale del tipo:



ciao a tutti

Pietro

**flanza** · 20-07-2004, 09:53

Prova questo:

<style>
#container {
width: 962px;
height: 700px;
margin-left: auto;
margin-right: auto;
padding-left: 4px;
padding-right: 4px;
background-color: #F0F0F0;
background-image: url(container.gif);
background-repeat: repeat-y;
text-align: left;
}

#nav_bar {
width: 100%;
height: 18px;
border-top: solid black 1px;
border-bottom: solid black 0px;
background-image: url(nav_bar.gif);
background-repeat: repeat-x;
}

#container_center {
width: 468px;
w\ idth:456px;
margin-left: 316px;
margin-right: 176px;
border: solid 1px black;
}

#container_left {
float: left;
width: 300px;
margin-left: 7px;
border: solid 1px black;
display:inline;
}

#container_right {
float: right;
width: 160px;
margin-right: 7px;
border: solid 1px black;
display:inline;
}

</style>
<body>
<div id="container">
<div id="nav_bar"></div>
<div id="container_left"></div>
<div id="container_right"></div>
<div id="container_center"></div>
</div>

</body>

**wedtaur** · 20-07-2004, 12:24

Dunque,
ho dichiarato le colonne flottanti con display: inline;
In questo modo i margini si adattano ai 7px impostati anche su explorer. Il problema che rimane è la colonna centrale che non ne vuole sapere di mettersi in mezzo alle altre due e si presenta nella riga accapo.
Ho provato a farla salire, riuscendoci, dichiarando un width esclusivo, più piccolo, per IExplorer. In quel caso però non va bene perchè mi servono delle misure precise.

Questa l'immagine su IE:

**wedtaur** · 20-07-2004, 12:38

Risolto tutto!

Ho aggiunto alle due colonne float:

codice:

display: inline;

Ed a quella centrale:

codice:

m\ argin-left: 313;
m\ argin-left: 173;

Quindi alla fine sono ricorso all'hack di explorer per ridurre il margine quanto bastava.

**lleffe** · 20-07-2004, 15:44

Originariamente inviato da wedtaur

Ed a quella centrale:

codice:

m\ argin-left: 313;
m\ argin-left: 173;

e margin-right: important!

**ptransidico** · 20-07-2004, 17:20

Ma non facevi prima a non mettere nessuna larghezza nel tuo div:

#container_center {
margin-left: 316px;
margin-right: 176px;
border: solid 1px black;
}

Non devi ricorrere a nessun tipo di hack

ciao

Discussione: Problema layout a tre colonne

Strumenti discussione

Ricerca discussione

Visualizza

Problema layout a tre colonne

Permessi di invio