Div si sovrappongono ingrandendo la pagina

[Vitto97]

Ho una pagina a colonna singola con header, contenuti e footer. Nel momento in cui ingrandisco con lo zoom però i div si sovrappongono. Dov'è il problema?

body {
	width: 1000px;
	margin: 0 auto 0 auto;
	padding: 0px;
	border: none;
	background-image: url('http://www.byte-company.com/sfondo02.jpg');
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	}

#header {
	font-family: 'Bad Script', cursive;
	height: 23%;
	text-align: center;
	color: white;
	background: #0000FF;
	padding: 0.3%;
	margin: 0 auto 0 auto;
	border: none;
	
	}
#content {
	font-family: 'Patrick Hand', cursive;
	height: 60%;
	background: #0000FF;
	padding: 5%;
	font-size: 24pt;
	color: white;
	position: static;
	}
#footer {
	font-family: 'News Cycle', cursive;
	height: 5%;
	background: #0000FF;
	border: none;
	padding: 0.5%;
	text-align: center;
	margin: 0 auto 0 auto;
	color: white;
	position: static;
	}

[dabadort]

cred sia nell'altezza in percentuale... hai un link da far vedere?
perchè position: static?

[Vitto97]

Si, il position:static era giusto una prova per vedere se risolveva qualcosa, l'ho tolto.

http://vittoriotorri.altervista.org/index.html


Se come dici tu è l'altezza in percentuale, sono obbligato a darle una dimensione fissa in px per evitare questo problema?

[ac_socmel]

potresti non definire l'altezza
e potresti non dare una larghezza al body
insomma per essere un layout a colonna singola stai facendo di tutto per complicaro
e poi non definire un doctype è una scelta oppure una dimenticanza?

[Vitto97]

hai ragione, così sembra funzionare perfettamente:

body {
	min-height: auto;
	margin: 0 auto 0 auto;
	padding: 0px;
	border: none;
	background-image: url('http://www.byte-company.com/sfondo02.jpg');
	-moz-background-size: cover;
	-webkit-background-size: cover;
	background-size: cover;
	}
#container {min-height: 100%;
			width: 1000px;
			margin: auto;
		}

#header {
	font-family: 'Bad Script', cursive;
	text-align: center;
	color: white;
	background: #0000FF;
	padding: 0.3%;
	margin: 0 auto 0 auto;
	border: none;
	border-radius: 30px 30px 0px 0px;
	-moz-border-radius: 30px 30px 0px 0px; /* firefox */
	-webkit-border-radius: 30px 30px 0px 0px; /* safari, chrome */
	
	}
#content {
	font-family: 'Patrick Hand', cursive;
	background: #0000FF;
	padding: 5%;
	font-size: 24pt;
	color: white;
	}
#footer {
	font-family: 'News Cycle', cursive;
	background: #0000FF;
	border: none;
	padding: 0.5%;
	text-align: center;
	margin: 0 auto 0 auto;
	color: white;
	border-radius: 0px 0px 30px 30px;
	-moz-border-radius: 0px 0px 30px 30px; /* firefox */
	-webkit-border-radius: 0px 0px 30px 30px; /* safari, chrome */
	}

Riguardo al doctype, non l'avevo ancora messo, avevo giusto lasciato una riga per farlo poi.