Problemino con layout a tre colonne

**riccardone** · 11-10-2009, 18:26

Sto cercando di sbrogliare un problema di allineamento orizzontale di tre div in un layout a tre colonne. La colonna di destra non ne vuol sapere di stare all'altezza delle altre.
Dove sto sbagliando?

Ecco un esempio di codice html

codice:

<div id="main">
        <div id="column_wrapper" class="tre_col">
            <div id="column_left">
            </div>
            <div id="column_center">
            </div>
            <div id="column_right">
            </div>
        </div>
    </div>

ed ecco un esempio di css

codice:

.tre_col #column_center
{
margin:0 300px; 
padding:1em 10px;
border:1px solid green;
}

.tre_col #column_left
{
float:left;
width:290px; 
padding:1em 0 0 10px;
border:1px solid red;
}

.tre_col #column_right
{
float:right; 
width: 290px; 
padding:1em 5px;
border:1px solid #CCC;
}

grazie

**miki003** · 11-10-2009, 18:35

Un esempio

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

.div-1-1 {
	background-color: #ffff00;
	border: none;
	clear: both;
	float: left;
	height: 19px;
	line-height: 19px;
	padding: 0px;
	width: 327px;
}

.div-1-2 {
	background-color: #00ff00;
	border: none;
	float: left;
	height: 19px;
	line-height: 19px;
	padding: 0px;
	width: 327px;
}

.div-1-3 {
	background-color: #00ffff;
	border: none;
	float: left;
	height: 19px;
	line-height: 19px;
	padding: 0px;
	width: 327px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="div-1-1"></div>
			<div class="div-1-2"></div>
			<div class="div-1-3"></div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

Fai tu il confronto com il tuo

**ale87440** · 11-10-2009, 18:42

Prova a modificare il tuo css in questo modo:

codice:

.tre_col #column_center {
border:1px solid green;
float:left;
margin:0 300px;
padding:1em 10px;
width:622px;
}
.tre_col #column_left
{
float:left;
width:290px; 
padding:1em 0 0 10px;
border:1px solid red;
}

.tre_col #column_right {
border:1px solid #CCCCCC;
float:left;
padding:1em 5px;
width:290px;
}

Ciao...

**riccardone** · 11-10-2009, 19:17

Originariamente inviato da miki003
....
Fai tu il confronto com il tuo

Dal confronto risulta che il tuo layout ha 3 colonne a larghezza fissa tutte con float left. Il mio layout dovrebbe avere la colonna centrale fluida e utilizzo float left e right per quelle laterali.

**riccardone** · 11-10-2009, 19:20

Originariamente inviato da ale87440
Prova a modificare il tuo css in questo modo....

Mi sembra che le modifiche che hai suggerito rendano inutilizzabile il layout. Hai impostato float left a tutte le colonne e un width di 622 a quella centrale

**miki003** · 11-10-2009, 22:21

Originariamente inviato da riccardone
Dal confronto risulta che il tuo layout ha 3 colonne a larghezza fissa tutte con float left. Il mio layout dovrebbe avere la colonna centrale fluida e utilizzo float left e right per quelle laterali.

Invece di utilizzare left e right che come vedi non ti danno un buon risultato, utilizzi solo left, mi sembra ti debba andare meglio, poi le dimensioni le puoi modificare tu anche in percentuale, io ti ho fatto solo un esempio per farti vedere l'allineamento delle colonne

Discussione: Problemino con layout a tre colonne

Strumenti discussione

Ricerca discussione

Visualizza

Problemino con layout a tre colonne

Permessi di invio