layout 3 colonne, float, clear

**polliotto** · 26-10-2005, 17:56

Ho un problema enorme!
Nelle colonne sto usando clear e float. La cosa strana che succede, che nella colonna centrale il conteuto scende.
Ho provato a cambiare il clear:both; con clear:left; ma in explorer continua il contenuto a stare in basso.
Qualcuno sa dirmi dove sbaglio, vo posto il codice di base.
Magari l'errore è qua.
Grazie mille

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html, body{
	background:#FFFFFF;
	font-family:Arial, Helvetica, sans-serif;
	font-size:78%;
	color:#000000;
	height:100%;
	margin:0px;
	padding:0px;
}
body{
	text-align:center;
}
#contenitore{
	margin: 0px auto;
	text-align:left;
	background:#FFFFFF url(img/sfondo.gif) repeat-y ;
	border-left:1px solid #003366;
	border-right:1px solid #003366;
	width: 740px;
	\width: 742px;
	w\idth: 740px;
}
#testa{
	height:140px;
	background-image:url(img/head.jpg)
}
#col_sin{
	background-color:#999999;
	float:left;
	padding:5px;
	width:178px;
	\width:188px;
	w\idth:178px;
}
#col_dest{
	background-color:#999999;
	float:right;
	padding:5px;
	width:230px;
	\width:240px;
	w\idth:230px;
}
#col_cent{
	background-color:#DDDDDD;
	margin-left:188px;
	margin-right:240px;
	padding:5px;
}
#pie{
	clear:both;
	width:740px;
	background-color:#FFFFFF;
}
</style>
</head>
	<body>
		<div id="contenitore">
			<div id="testa">testa</div>
			<div id="col_sin">colonna sinistra</div>
			<div id="col_dest">colonna destra</div>
			<div id="col_cent">colonna centrale</div>
			<div id="pie">pie</div>
		</div>
	</body>
</html>

**polliotto** · 28-10-2005, 16:42

qui c'è lesempio
nella colonna centrale ho inserito questo codice, non capisco perchè scende giu..
c'è qualcuno che sa perchè?

codice:

<div style="margin-bottom:10px;">
	[img]img/CASE.jpg[/img]
	Lorem ipsum dolor sit amet, consetetur sadipscing elitr.
	<div style="clear:left;"></div>			
</div>
egfslhi

l'esempio

**thomas_anderson** · 28-10-2005, 17:27

Scende giù anche in Opera. Prova a togliere il padding dal contenuto centrale, dalla colonna sinistra e di destra.

**polliotto** · 28-10-2005, 17:50

grazie inanzi tutto per la risposta!
Ho tolto ma niente,ho un po cambiato la struttura nel senso che, ho messo margin-left e right 5px in piu, ma sempre la stessa cosa.
Comunque ho notato una cosa starnissima, se tolgo il contenuto a sinistra, il contenuto centrale sale su.
non capisco per quale motivo.
Potresti controllare che magari a me sfuggie qualcosa...
So che il codice confuso ma uso da poco i css..

codice:

#col_sin{
	float:left;
	padding:5px;
	width:170px;
	\width:180px;
	w\idth:170px;
}
#col_sin p{
	margin:4px 0px 0px 0px;
	padding:0px;
}
input, select{
	padding:0px;
	margin:0px;
}
#col_sin select {
	width:100%;
}

.button{
	margin:4px 0px 0px 0px;
	text-align:right;
}
.button input{
	width:70px;
	color:#48508E;
	background-color:#DBE5E7;
	font-weight:bold;
}
.input{width:100%}

grazie mille ancora

**thomas_anderson** · 28-10-2005, 18:36

Prima cosa, togli gli hack su width: ormai siamo prossimi a IE7 e queste cose andranno giocoforza eliminate. La cosa che non mi convince è che va giù anche con Opera, quindi non credo dipenda dal solito IE. Ricomincia da capo e fai una prova senza l'immagine flottante, con il padding delle due colonne azzerato. Se vuoi posizionare gli elementi all'interno di queste ultime, usa la marginazione per tali elementi.

Oppure dai il clear:left all'elemento posizionato dopo il contenuto che segue l'immagine.

**thomas_anderson** · 29-10-2005, 10:31

Mi correggo: visto che hai usato sia float:left che right, usa clear:both.

**polliotto** · 08-11-2005, 15:33

Grazie thomas_anderson per la tua risposta ma non è quello il problema

Semplifico la mia domanda: Per quale motivo se inserisco clear:both,clear:left, prende la parte piu lunga delle 2 colonne laterali e sposta tutto il contenuto sotto?
Esiste un layout che non regisca a questi tipi di commandi?
Ho semplificato lo scipt per fare un esempio.

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<style type="text/css">
#contenitore{
	margin: 0px auto;
	text-align:left;
	background:#FFFFFF url(img/sfondo1.gif) repeat-y;
	width: 740px;
}
#colonna_sinistra{
	float:left;
	width:180px;
}
#colonna_destra{
	float:right;
	width:180px;
}
#colonna_centrale{
	margin-left:180px;
	margin-right:180px;
}
div{border:1px solid #000000;}
</style>
</head>
<body>
	<div id="contenitore">
		<div id="colonna_sinistra">
			<div style="height:400px; background:#FF0000;">a</div>
		</div>
		<div id="colonna_destra">b</div>
	  	<div id="colonna_centrale">
			centrale
			<div style="clear:both;"></div>
			testo
	  </div>
	</div>
</body>
</html>

**goFFi** · 16-11-2005, 08:40

Salve prof polliotto.. Ma il fatto gli succede solo con Internet explorer o solo con firefox?
provi a controllare dalla w3c al massimo...

VVoVe:

Discussione: layout 3 colonne, float, clear

Strumenti discussione

Ricerca discussione

Visualizza

layout 3 colonne, float, clear

Browser?

Permessi di invio