height auto ai div annullano i margin

**gabar-el** · 11-08-2007, 16:45

ciao, stavo provando a dare degli height auto a vari div in un css, ma così facendo non riesco + a controllare i margin tra un div e l'altro, non è possibile? altrimenti come potrei fare?
thank's

**Vincent.Zeno** · 11-08-2007, 17:10

... non mi risulta...
con quale DTD ?

**gabar-el** · 11-08-2007, 19:03

ho risolto dando height in percentuale e lasciando auto solo a 2 div di dx (uno sotto l'altro) in un layout 2 colonne. il dtd che uso è xhtml 1.0 strict.
mi stai dicendo che è possibile dare anche auto e mantenere i margin? ma al contenitore non posso dargli auto no?
forse ho detto delle castronate.....
ascolto....

**Vincent.Zeno** · 12-08-2007, 03:11

ecco...
tutte queste cose senza codice di esempio non hanno molto senso....

e se illustri riferendoti a marcatori specifici è pure meglio

**gabar-el** · 12-08-2007, 10:23

css:

codice:

#contenitore {
	width: 950px;
	height: 100%;
	margin: 0 auto;
	text-align: center;
}
#testa {
	width: 940px;
	height: 10%;
	padding-left: 10px;
	text-align: center;
}
#nav {
	width: 950px;
	height: 5%;
	line-height: 100%;
	margin: 20px 0 50px 0;
	padding: 0;
}
#corpo {
	margin: 0;
	width: 950px;
	height: 80%;
	text-align: left;
}
#sinistra {
	margin: 0;
	padding: 5px 15px;
	border: 1px dashed #ccc;
	width: 548px;
	height: 100%;
	background-color: #f5f5f5;	
	float: left;
}
#destra {
	margin: 0 40px 0 45px;
	padding: 5px 0 5px 25px;
	border: 2px solid #000;
	width: 256px;
	height: auto;
	float: right;
}
#destra2 {
	margin: 30px 5px 0 10px;
	padding: 0 55px;
	width: 245px;
	height: auto;
	float: right;
}
#piede {
	margin-top: 25px;
	padding: 5px 0;
	clear: both;
	width: 950px;
	height: 5%;
	line-height: 25px;
	background: #e6e6e6;
	text-align: left;
}

html

codice:

<div id="contenitore">
	<div id="testa">
	</div>
	<div id="nav">
	</div>
	<div id="corpo">
		<div id="sinistra">
		</div>
			<div id="destra">
			</div>
			<div id="destra2">
			</div>
			</div>
<div id="piede">
</div>
</div>

**Vincent.Zeno** · 12-08-2007, 13:40

ho smanettato un po' e secondo me hai solo creato margini in eccesso....
inutile e eccessivo mettere margini a sinistra dei div destra e destra2
se questi sono flottati a destra.
vedi se ti ritrovi in questo:

codice:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html>

<head>
<meta http-equiv="Content-Language" content="it">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina 1</title>
<style type="text/css">
#contenitore {
	width: 950px;
	height: auto;
	margin: 0 auto;
	text-align: center;
	background:silver;
}
#testa {
	width: 940px;
	height: auto;
	padding-left: 10px;
	text-align: center;
	background:red;
}
#nav {
	width: 950px;
	height: auto;
	line-height: 100%;
	margin: 20px 0 50px 0;
	padding: 0;
	background:blue;
}
#corpo {
	margin: 0;
	width: 950px;
	height: auto;
	text-align: left;
}
#sinistra {
	margin: 0px 0px 25px 0px;
	padding: 5px 15px;
	border: 1px dashed #ccc;
	width: 548px;
	height: auto;
	background-color: #f5f5f5;	
	float: left;
}
#destra {
	margin: 0px 20px 0px 0px;
	padding: 5px 0 5px 25px;
	border: 2px solid #000;
	width: 256px;
	height: auto;
	float: right;
	background:blue;
}
#destra2 {
	margin: 30px 5px 0px 0px;
	padding: 0px 55px;
	width: 245px;
	height: auto;
	float: right;
	background:red;
}
#piede {
	margin-top: 25px;
	padding: 5px 0;
	clear: both;
	width: 950px;
	height: auto;
	line-height: 25px;
	background: #e6e6e6;
	text-align: left;
}</style>
</head>

<body>
<div id="contenitore">
	<div id="testa">
	TESTA</div>
	<div id="nav">
	BARRA NAV</div>
	<div id="corpo">
		<div id="sinistra">
		SINISTRA

S</p>
		

S</p>
		

S</p>
		

S</p>
		

S</p>
		

S</p>
		

S</p>
		

S</div>
			<div id="destra">
			DESTRA</div>
			<div id="destra2">
			DESTRA 2</div>
			</div>
<div id="piede">
PIEDE</div>
</div>

</body>

</html>

**gabar-el** · 12-08-2007, 14:53

ora provo grazie, ma per creare un layout 3 colonne non devo mettere 2 div dentro al corpo (flottato a sx), farli flottare a sx e dx e poi il div dx farlo flottare a dx? ho visto che tu hai messo tutto dentro al corpo....

**gabar-el** · 12-08-2007, 15:09

ho notato ora che avevo riportato male l'html.
il div del corpo in realtà racchiude sinistra e destra.....

codice:

<div id="corpo">
<div id="sinistra">
</div>
<div id="destra">
</div>
</div>
<div id="destra2">		
</div>

cmq ho provato come mi hai suggerito (ma con l'html come dicevo), mi trancia la nav e non mi da i margin nel piede....

**Vincent.Zeno** · 12-08-2007, 15:12

... non c'entra con quanto trattiamo:
per il layout a tre colonne cambia il modo di scrivere a seconda di come imposti il tutto.
consulta a proposito la guida di html con tutti gli esempi.

:master: dentro al corpo? ovvio... dove dovevo metterli?
l'esempio era il tuo... e pure corretto

**gabar-el** · 12-08-2007, 15:19

no, hai dato al corpo tutta la larghezza del contenitore, io invece la divido tra corpo e div di destra....
infatti il mio è un layout a 3 colonne, non ho infatti capito quando dici che do margini in eccesso, cioè, son tutti contati dentro al width e non so invece come funzionano per quanto riguarda l'height in auto e %, ma crdo che dovrebbero fare solo il loro lavoro senza modificare o creare problematiche al layout. Ho veduto le guide, ma nn sono riuscito a trovare nulla circa l'height in auto e %.....
grazie e scusa le mie lacune....

Discussione: height auto ai div annullano i margin

Strumenti discussione

Ricerca discussione

Visualizza

height auto ai div annullano i margin

Permessi di invio