Altezza automatica DIV

[nico.gaglia]

Ciao a tutti,
ho un sito composto banalmente da container , il quale contiene sidebar sulla sinistra e content sulla destra.
Quello che succede con Firefox e non con Internet Explorer durante i test è che:
- se il contenuto della sidebar è più grande di quello del content, io ho un "buco" sotto il content che arriva fino al footer.
- se il contenuto del content è più grande di quello della sidebar, io ho un "buco" sotto la sidebar che arriva fino al footer.
Posto il css dei 3 div in questione:
-container

#container {
	background: transparent url(../images/bgcontainer.png) repeat-y 100% 1px;
	margin: 0 auto;
	width: 800px;
	height: auto;
	text-align: left;
	min-height: 1600px;
	
}

-content

#content {
	float: right;
	width: 550px;
	background: #FFFFFF;
	min-height: 300px;
	height: auto;
}

-sidebar

#sidebar {
	float: left;
	width: 250px;
	height: auto;
	background: transparent url(../images/bgsidebar.png) repeat-y 0 100%;
}

Sono disponibile a rispondere a qualsiasi domanda in merito....

Grazie in anticipo per l'aiuto

[fcaldera]

il problema è che non vuoi il "buco" ?
se sì, cerca "false colonne" nel forum.

[nico.gaglia]

Ora ci guardo, grazie.
Nel frattempo allego un piccolo screenshot dove ho coperto per motivi di privacy il contenuto... nel caso in cui il contenuto del content è maggiore del contenuto della sidebar.

Grazie

[nico.gaglia]

Visto.... ma necessita di javascript, preferirei evitarlo di usare per queste cose... anche se in ultima spiaggia....


Non esiste un metodo full CSS per risolvere questo problema?

Grazie

[fcaldera]

Originariamente inviato da nico.gaglia
Non esiste un metodo full CSS per risolvere questo problema?
Grazie

le "false colonne" sono un metodo puro css
non so cosa tu abbia trovato

[fcaldera]

http://www.alistapart.com/articles/fauxcolumns/

[stezxx85]

Non mi vengono in mente soluzioni che non prevedano js.
Se non, ovviamente, quella di dare un'altezza fissa a content e sidebar... o al limite al conteiner...

In realtà, c'è un trucci per far sembrare 2 colonne alte uguale anche se non lo sono... ma funziona solo se la colonna più lunga è sempre la stessa... e non mi pare sia il tuo caso...

[fcaldera]

le false colonne funzionano sempre a prescindere da quale delle due colonne è più alta.
il trucco consiste nel mettere uno sfondo al contenitore delle colonne che si ripeta sull'asse y e di togliere lo sfondo alle singole colonne.

è dato per scontato che se le colonne sono float-tate allora il contenitore dovrà avere un clearing per poterle racchiudere correttamente

[stezxx85]

Originariamente inviato da fcaldera
le false colonne funzionano sempre a prescindere da quale delle due colonne è più alta.
il trucco consiste nel mettere uno sfondo al contenitore delle colonne che si ripeta sull'asse y e di togliere lo sfondo alle singole colonne.

è dato per scontato che se le colonne sono float-tate allora il contenitore dovrò avere un clearing per poterle racchiudere correttamente

A questo non ci avevo mai pensato! è anche molto più semplice!

[nico.gaglia]

La cosa strana che mi succede però (e quello che sto per dire l'ho osservato con firebug) è che il container non arriva fino in fondo alla colonna più alta, ma si ferma all'altezza dell'header.
Ho dimenticato di dire infatti che il container contiene anche l'header, oltre che le due colonne.

Il che mi sembra molto strano....

Ho provato come dite voi a mettere una striscia di sfondo da ripetere verticalmente, e se imposto una height fissa al container lunga a piacere il sito viene con il layout corretto.
Ma non conosco a priori che altezza avranno le due colonne, quindi la cosa non è applicabile