Altezza div del 100%.... mi funziona solo con explorer!

[Dave-Z]

body{
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	font-family: tahoma, verdana, arial, sans-serif;
	font-size: 80%;
	text-align: center;
}
div#container{
	width: 760px;
	height: 100%;
	float: center;
	margin: 0px auto;
	text-align: center;
}
div#sx{
	width: 380px;
	height: 100%;
	background: orange;
	float: left;
}
div#dx{
	width: 380px;
	height: 100%;
	background: green;
	float: left;
}

questo è il codice... due div affiancati e centrati nella pagina, ma vorrei che la loro altezza fosse del 100%. Non capisco perchè ma così mi funziona solo con explorer...dove sbaglio? aiuto piero

[Dave-Z]

un'altra cosa: se imposto un padding al div sx o al dx, mi slittano uno sotto l'altro! perchè?

[jepers]

IE usa height come fosse min-height dei browser standard.

Quindi per averlo su tutti prova cosi:

height:auto !important;
height:100%: 
min-height:100%;

Questo lo trovi spiegato bene su constile

Per la seconda cosa, credo sia un problema di dimensioni totali.

[Marcolino's]

Originariamente inviato da jepers
IE usa height come fosse min-height dei browser standard.

Quindi per averlo su tutti prova cosi:

min-height:100%;
height:auto !important;
height:100%;

Questo lo trovi spiegato bene su constile

Per la seconda cosa, credo sia un problema di dimensioni totali.

[Dave-Z]

body{
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	font-family: tahoma, verdana, arial, sans-serif;
	font-size: 80%;
	text-align: center;
}
div#container{
	width: 760px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	float: center;
	margin: 0px auto;
	text-align: center;
}
div#sx{
	width: 380px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: orange;
	float: left;
}
div#dx{
	width: 380px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: green;
	float: left;
}

ho modificato il css così, ma funziona lo stesso solo con ie.... non capisco perchè

[pierofix]

Mummle mummle. :master:

Che io sappia, cercare di settare l'altezza a degli elementi div ai fini di layout risulta sempre un'impresa fallimentare.

Alla fine - o almeno è quello che ho sempre fatto io - se si vogliono ottenere colonne della stessa altezza consiglio di utilizzare le colonne fittizie, tipo www.itgmarinoni.it o www.stopdesign.com .

Mi spiace, ma questo tasto è sempre dolente. Oltretutto, se le colonne sono più alte dell'altezza della finestra browser, il discorso del 100% va a farsi benedire.

[Dave-Z]

			body{
				margin: 0px;
				text-align: center;
			}
			div#container{
				width: 600px;
				height: 100%;
				margin: auto;
				text-align: center;
			}
			div.sx{
				width: 200px;
				height: 100%;
				background: orange;
				float: left;
			}
			div.center{
				width: 200px;
				height: 100%;
				background: black;
				float: left;
			}
			div.dx{
				width: 200px;
				height: 100%;
				background: yellow;
				float: left;
			}

così funziona!!!

[awd]

Originariamente inviato da pierofix
Mummle mummle. :master:

Che io sappia, cercare di settare l'altezza a degli elementi div ai fini di layout risulta sempre un'impresa fallimentare.

Alla fine - o almeno è quello che ho sempre fatto io - se si vogliono ottenere colonne della stessa altezza consiglio di utilizzare le colonne fittizie, tipo www.itgmarinoni.it o www.stopdesign.com .

Mi spiace, ma questo tasto è sempre dolente. Oltretutto, se le colonne sono più alte dell'altezza della finestra browser, il discorso del 100% va a farsi benedire.

colonne fittizie?

[Raulken]

Originariamente inviato da Dave-Z

			body{
				margin: 0px;
				text-align: center;
			}
			div#container{
				width: 600px;
				height: 100%;
				margin: auto;
				text-align: center;
			}
			div.sx{
				width: 200px;
				height: 100%;
				background: orange;
				float: left;
			}
			div.center{
				width: 200px;
				height: 100%;
				background: black;
				float: left;
			}
			div.dx{
				width: 200px;
				height: 100%;
				background: yellow;
				float: left;
			}

così funziona!!!

a me non funziona.....