Div a due colonne

**starcraftworld** · 10-04-2009, 13:33

Ho due div, vorrei disporli in modo che uno fosse allineato a sinistra e uno a destra, come a formare le due colonne della pagina.
Ho provato con align:left e align:right ma non succede niente...

**Gufo** · 10-04-2009, 14:06

Originariamente inviato da starcraftworld
Ho due div, vorrei disporli in modo che uno fosse allineato a sinistra e uno a destra, come a formare le due colonne della pagina.
Ho provato con align:left e align:right ma non succede niente...

Con posizione assoluta

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: 59px;
	position: relative;
	text-align: left;
	width: 981px;
}

.div-1-1 {
	border: none;
	height: 19px;
	left: 20px;
	padding: 0px;
	position: absolute;
	text-align: left;
	top: 20px;
	width: 460px;
}

.div-1-2 {
	border: none;
	height: 19px;
	left: 500px;
	padding: 0px;
	position: absolute;
	text-align: left;
	top: 20px;
	width: 461px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div align="left" class="div-1-1"></div>
			<div align="left" class="div-1-2"></div>
		</div>
	</body>
</html>

Flottante

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;
	text-align: left;
	width: 981px;
}

.div-1-1 {
	border: none;
	clear: both;
	display: inline;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	padding: 0px;
	text-align: left;
	width: 460px;
}

.div-1-2 {
	border: none;
	float: left;
	margin-left: 20px;
	margin-top: 20px;
	padding: 0px;
	text-align: left;
	width: 461px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div align="left" class="div-1-1"></div>
			<div align="left" class="div-1-2"></div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

**starcraftworld** · 10-04-2009, 14:08

Grazie

**Gufo** · 10-04-2009, 14:17

Che vuoi dire? C'è la soluzione flottante e assoluta che vuoi di più?

**starcraftworld** · 10-04-2009, 14:24

La flottante l'hai aggiunta dopo e infatti ho editato il mio messaggio.

**starcraftworld** · 10-04-2009, 14:42

Altra cosa...come faccio a centrare un div all'interno di un altro div?

**Gufo** · 10-04-2009, 14:59

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 {
	background-color: #ff0000;
	border: none;
	text-align: left;
	width: 687px;
}

.div-1-1 {
	background-color: #ffff00;
	border: none;
	clear: both;
	display: inline;
	float: left;
	line-height: 200px;
	margin: 50px;
	padding: 0px;
	width: 587px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1"></div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

**starcraftworld** · 10-04-2009, 15:19

Non c'è la soluzione flottante con qualcosa del tipo align:center?

**starcraftworld** · 10-04-2009, 15:51

Ho risolto più semplicemente usando margin:auto;

**kontrasto** · 10-04-2009, 15:53

Html:

<div id="contenitore">
<div id="centrato"></div>
</div>

Css:

#contenitore { width:100px; float: left; }

#centrato { width:50px; float:left; margin: 0 25px; }

Praticamente sottrai la larghezza del div che vuoi centrare da quella del div che lo contiene, poi lo dividi per metà e imposti quest'ultimo risultato come margine destro e sinistro.

Discussione: Div a due colonne

Strumenti discussione

Ricerca discussione

Visualizza

Div a due colonne

Re: Div a due colonne

Permessi di invio