dividere un div a 2

**DarioMarco** · 10-03-2009, 23:22

Salve a tutti, vorrei dividere un blocco, come quando si divide una tabella in due colonne, ma non ci riesco, faccio un esempio:

codice:

<div>
<div style="width:50%">elemento 1 </div>
<div style="width:50%">elemento 2</div>
</div>

in questo modo gli elementi vanno uno sopra l'altro sotto, mentre il mio layout e fisso.

come dovrei fare???

grazie, ciao.

**fcaldera** · 10-03-2009, 23:35

li affianchi mettendoli in float

**DarioMarco** · 10-03-2009, 23:42

potresti farmi un'esempio sempre se non ti chiedo troppo???

è che usando questo metodo, spesso gli elementi impazziscono, si affiancano tutti, o si spargono in modo non aspettato, penso di non saperlo proprio usare, è meglio seguire il tuo esempio

**fcaldera** · 11-03-2009, 00:40

esempio

<div style="height: auto; overflow: hidden">
<div style="width:50%; float:left;">elemento 1 </div>
<div style="width:50%; float:left;">elemento 2</div>
</div>

lo stile sul div esterno serve per fare clearing senza markup aggiuntivo

**DarioMarco** · 11-03-2009, 01:09

perdonami, ma non mi funzionano, e se io magari usassi il posizionamento assoluto???

**sir daniel** · 11-03-2009, 01:19

sul secondo div non mettergli il float.

<div style="width: 50%; float: left;"></div>
<div style="width: 50%; "></div>

con il posizionamento

<div style="width:50%; position: absolute;"></div>
<div style="width:50%; margin-left: 50%;"></div>

**Gufo** · 11-03-2009, 01:25

Prova così:

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>
		<title>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">
.div-1 {
	border: none;
	height: 400px;
	position: relative;
	text-align: left;
	width: 400px;
}

.div-1-1 {
	border: #000000 solid 1px;
	border-right: none;
	height: 400px;
	left: 0px;
	line-height: 400px;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 200px;
}

.div-1-2 {
	border: #000000 solid 1px;
	height: 400px;
	left: 200px;
	line-height: 400px;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 200px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1"></div>
			<div class="div-1-2"></div>
		</div>
	</body>
</html

**DarioMarco** · 11-03-2009, 15:54

thnx, funziona anche questo

Discussione: dividere un div a 2

Strumenti discussione

Ricerca discussione

Visualizza

dividere un div a 2

Permessi di invio