Estensione pagina con Firefox

[fickyz]

Estensione pagina con Firefox

Salve a tutti,
il problema dell'ultim'ora è questo...

Sto creando le mie pagine con due fogli di stile separati, destinati ai browser IE e FX.

Il mio problema è che con FFX non riesco a fare in modo che i due div laterali si estendano di pari passo con l'aumentare della lunghezza del paragrafo del div centrale mentre, naturalmente, in IE non ho alcun problema.

Qualcuno può indicarmi qualche soluzione?

[laburno]

Ciao fickyz,
facci vedere i tuoi fogli di stile

[fickyz]

@Laburno said:

Ciao fickyz,
facci vedere i tuoi fogli di stile

Niente di particolare...

ho div annidati l'uno nell'altro...

Il div contenitore ha solo il parametro width impostato, mentre quelli annidati hanno impostato oltre la larghezza, anche il height:100%!

[laburno]

Senza il codice non saprei proprio cosa dirti.... ho poca immaginazione :bho:

[fickyz]

/*STRUTTURA PRINCIPALE DELLA PAGINA */
div.content1 {
clear:both;
width:750px;
margin:0;
padding:0;
background-color:#FFFFFF;
}
div.corpo1 {
float:left;
width:560px;
margin:0;
padding:0;
}
div#sx{
float:left;
width:200px;
height:100%;
background-color:#F7F7F7;
margin:0;
padding:0;
}
div.center {
float:right;
width:360px;
height:100%;
background-color:#FFFFFF;
margin:0;
padding:0;
}
div#extra {
background-color:#F7F7F7;
float:right;
width:190px;
height:100%;
margin:0;
padding:0;
}

[laburno]

Ciao fickyz,
quale div è dentro quale div?

[fickyz]

@Laburno said:

Ciao fickyz,
quale div è dentro quale div?

Il div "content" è quello che contiene sia sx che center...il div extra è a se...
Vorrei che sx ed extra seguissero l'andamento del testo in center.

Voglio dire, se scrivo un testo che mi allunga la pagina, voglio che anche i div laterali si allunghino della stessa estensione in cui si allunga il div center...

[laburno]

Ciao,
ok allora esistono alcune soluzione a questo problema, più che spiegartele io, che mi impappino sempre a scrivere, ti rimando a dei tutorial:
Soluzione 1:
http://www.positioniseverything.net/articles/onetruelayout/equalheight è in inglese
Soluzione 2 (faux column):
http://www.alistapart.com/articles/fauxcolumns/ in inglese
http://css.html.it/articoli/leggi/2060/estendere-le-false-colonne/ approfondimento in italiano

La prima soluzione è quella di estendere le colonne con dei margini negativi, e sistemarne il contenuto con un padding appropriato. Il margine negativo, applicato in basso, allunga la colonna e, poi un padding di uguale modulo ma di segno opposto sistema il contenuto nella sua posizione originaria.

Il secondo metodo, quello delle false colonne, usa una immagine di sfondo costruita ad arte per simulare la lunghezza delle colonne, mentre in realtà i div hanno dimensione relativa al loro contenuto.
Personalmente penso che questo sia il metodo più "pulito".