Colonne che si allungano

**tryhere** · 22-08-2012, 13.31.10

Nella home il div centrale bianco adatta la sua altezza al contenuto...vorrei che le due colonne verdi a lato avessero la stessa altezza del div centrale bianco, come si può fare?

**karl94** · 22-08-2012, 13.45.05

Purtroppo non c'è (attualmente) un modo elegante per ottenere questo risultato. Potresti usare i valori table della proprietà display, altrimenti per farlo con i float leggi questo articolo: http://matthewjamestaylor.com/blog/e...r-css-no-hacks.

**tryhere** · 23-08-2012, 13.43.53

Ho seguito il link che mi hai dato e ho riscritto la pagina da zero.
Sono arrivato fino al capitoletto "Adding extra nested containers", perchè da quello in poi non ho più capito bene.
Cosa mi manca affinchè le colonne si allineino alla più alta?
Il link è sempre questo.

23-08-2012, 13.49.14

In questi casi io risolvo aggiungendo un contenitore alla pagina, dello stesso colore delle colonne più corte, così risolvo il problema.

23-08-2012, 13.54.40

Come dice australiaforever prova a dare al div "contenitore" lo stesso colore di sfondo dei due div "destra" e "sinistra", dovrebbe bastare

**tryhere** · 23-08-2012, 14.47.21

Funziona, grazie mille! ;)
E se volessi "centrare" il contenitore e quindi tutto il contenuto al centro della pagina, ovviamente in senso orizzontale?

23-08-2012, 16.45.51

Funziona, ma le colonne laterali devono essere sempre più corte di quella centrale, altrimenti si presenta il problema al contrario, vedresti il verde sotto il bianco.

Per centrare il tutto prova ad aggiungere al div "contenitore", nel css:

margin-left: auto;
margin-right: auto;

23-08-2012, 17.10.06

Per centrare basta che al div contenitore dai un margin:auto

esempio:

Codice:

#contenitore {margin:auto;
width:1000px;
}

**tryhere** · 23-08-2012, 17.49.32

@stefanodurso: esite un trucco per gestire anche il caso in cui le colonne laterali siano più lunghe di quella centrale?

Comunque ho provato entrambe le soluzioni che mi avete proposto riguardo i margini ma non succede nulla...

23-08-2012, 19.33.51

togli il "float: left;" dal div "Contenitore"

**tryhere** · 23-08-2012, 20.46.41

Tolto il float:left ma le colonne verdi non sono più verdi :(

23-08-2012, 21.13.25

Non vedi più il colore perché manca la proprietà height.

Copia e incolla tutto questo codice.

Codice:

body {
	background-color:#BBBBBB;
}

#contenitore {
	width:1000px;
	margin:auto;
	background-color:#C6D580;
	height:269px;
}

#sinistra {
	float:left;
	width:200px;
}

#centro {
	float:left;
	width:600px;
	background-color:#FFFFFF;
}

#destra {
	float:left;
	width:200px;
}

**tryhere** · 24-08-2012, 01.48.11

Ma se fisso l'altezza del div a 269 px non ottengo più il fatto che a seconda del contenuto le colonne si allunghino o accorcino...no?

24-08-2012, 10.34.24

Purtroppo no, ma se lo vuoi centrato devi fare così, altrimenti puoi usare il margin-left e posizionarlo ad occhio, ma non è la stessa cosa, anzi risulterebbe sballato per altre risoluzioni.

Questo è un punto debole per chi crea siti.

**tryhere** · 24-08-2012, 12.06.57

Ah ora ho capito perchè l'hai messo a 269px, perchè è esattamente la lunghezza della colonna bianca, ma la colonna bianca deve adattarsi ai contenuti che ci metto...deve esserci un modo per centrare il tutto e contemporaneamente mantenere l'adattamento verticale no?

24-08-2012, 12.18.22

Ho un idea.

Prova a fare così

Codice:

body {width:1000px;
margin:auto;
}

#contenitore {background-color:#ffffff 
overflow:auto;
}

Al posto del colore che ho messo io metti il tuo verde.

**tryhere** · 24-08-2012, 12.45.30

Magico! :) Funziona perfettamente!
Già che ci sono posso chiedere anche come dovrei fare se adesso volessi inserire un header e un footer sempre larghi 1000px?

24-08-2012, 12.52.01

Avendo il contenitore non devi più mettere il width, quindi basta mettere l'height

Adesso ti scrivo il codice html e css.

Codice HTML:

<html>
<head>
<title>Titolo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="contenitore">
<div id="header">
<h1>Titolo</h1>
</div>

	<div id="sinistra">
		<p>Link1</p>
		<p>Link2</p>
	</div>
	<div id="centro">
		<p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p>
	</div>
	<div id="destra">
		<p>Altro</p>
	</div>
</div>

<div id="footer">
<p>Testo footer</p>
</div>
</body>
</html>

Codice:

*,html {margin:0;
padding:0;
}

body {
	background-color:#BBBBBB;
	margin:auto;
	width:1000px;
}

#contenitore {
	background-color:#C6D580;
	overflow:auto;
	margin:0;
	padding:0;
}

#sinistra {
	float:left;
	width:200px;
}

#centro {
	float:left;
	width:600px;
	background-color:#FFFFFF;
	height:270px;
}

#destra {
	float:left;
	width:200px;
}

#header {height:60px;
margin:0;
background-color:#009900;
}

#footer {height:30px;
background-color:#009900;
}

Copia questo e dovrebbe funzionare.

**karl94** · 24-08-2012, 13.05.17

Li piazzi semplicemente prima e dopo il contenitore del corpo pagina, non è necessario specificare la larghezza, occuperanno quella disponibile che è già 1000px.

Metti anche la dichiarazione di DOCTYPE, altrimenti potresti avere problemi con alcuni browser.

**tryhere** · 24-08-2012, 18.42.16

Grazie mille ad entrambi! :)

24-08-2012, 19.12.07

Guardando il tuo codice noto che hai messo delle chiusure tipiche dell'XHTML, dovresti sistemarle.

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Titolo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
	<img src="logo.jpg" alt="Logo" />
</div>
<div id="contenitore">
	<div id="sinistra">
		<p>Link1</p>
		<p>Link2</p>
	</div>
	<div id="centro">
		<p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p>
	</div>
	<div id="destra">
		<p>Altro</p>
	</div>
</div>
</body>
</html>

in questo modo

Codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Titolo</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">
	<img src="logo.jpg" alt="Logo">
</div>
<div id="contenitore">
	<div id="sinistra">
		<p>Link1</p>
		<p>Link2</p>
	</div>
	<div id="centro">
		<p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p><p>Testo</p>
	</div>
	<div id="destra">
		<p>Altro</p>
	</div>
</div>
</body>
</html>

**tryhere** · 24-08-2012, 19.38.53

Se volessi invece utilizzare XHTML Strict che codice dovrei inserire come DOCTYPE?

24-08-2012, 20.10.18

Questo

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

**tryhere** · 25-08-2012, 10.26.44

Fatto ;) Grazie ancora!

Discussione: Colonne che si allungano

LinkBack

Strumenti discussione

Display

Colonne che si allungano

Regole di scrittura