[CSS] Problema con 3 DIV

[Fede 88]

ho queste 3 div disposte sulla stessa riga, che hanno l'altezza che si adatta al contenuto.

Vorrei far si che tutte le div abbiano sempre la stessa altezza, in pratica le 2 div devono assumere l'altezza della div con altezza maggiore.

Come posso fare?


#body {
float: left;
width: 924px;
background-color: white;
margin: 0 auto;
padding: 0px;
text-align: left;
}

#body {
float: left;
width: 920px;
background-image: url(imm/body.jpg);
margin: 0 auto;
padding: 12px 40px 12px 40px;
text-align: left;
}

#body {
float: left;
width: 24px;
background-color: white;
margin: 0 auto;
padding: 0px;
text-align: left;
}

[Amsirak]

disponi tutti e tre i div dentro un div che li contenga.

Questo contenitore deve regolare la sua altezza in base al contenuto del div maggiore, e gli altri due div devono ridimensionarsi in base all'altezza del contenitore

[Fede 88]

Ok per il div contenitore che si adatta al maggiore ci sono, però non saprei come far adattare quelli interni al contenitore.

[chano]

Ok per il div contenitore che si adatta al maggiore ci sono, però non saprei come far adattare quelli interni al contenitore.

gli dai come height: 100% o height: auto 100%

uno dei 2 dovrebbe funzionare :D

[Fede 88]

Ho provato ma non funziona, probabilmente sbaglio qualcosa io. Queste sono le 4 div.

cont_body è il contenitore delle 3 div (body_left, body e body_right).


#cont_body {
width: 968px;
background-color: red;
margin: 0 auto;
padding: 0px;
}

#body_left {
float: left;
width: 24px;
height: auto 100%;
background-image: url(imm/ombra_s.jpg);
background-repeat: repeat-y;
margin: 0 auto;
padding: 0px;
}

#body {
float: left;
width: 920px;
background-color: white;
margin: 0 auto;
padding: 12px 12px 12px 12px;
text-align: left;
}

#body_right {
float: left;
width: 24px;
height: auto 100%;
background-image: url(imm/ombra_d.jpg);
background-repeat: repeat-y;
margin: 0 auto;
padding: 0px;
}

[MEMon]

devi dare un'altezza al contenitore

[Fede 88]

Il fatto è che il contenitore si dovrebbe adattare alla cella più alta tra le 3.
Non è possibile farlo senza dargli un'altezza? Al massimo potrei dargli un altezza minima, però la massima non posso saperla (varia in base al contenuto)

[MEMon]

Ma sei sicuro che è quello che vuoi?
Ora non mi viene in mente un modo pulito per fare quello che hai chiesto quindi c'è la possibilità che non sia possibile.

Dimmi perchè vuoi che funzioni così.

[Fede 88]

La div centrale sarebbe il corpo della mia pagina, quindi la lunghezza varia in base al contenuto, mentre le 2 div laterali servono per i bordi dello sfondo (per questo ho la necessità di avere 3 div separate).

Il fatto è che com'è fatto ora la div centrale si adatta al testo, però i bordi essendo in altre div restano fissi, quindi si allunga la pagina però i bordi restano di una riga.

[MEMon]

Ecco vedi che quello che cerchi è inutile.
Per avere le due colonne di colore diverso si fa in altro modo.
Se ti basta un colore tinta unita, potresti ad esempio impostare al div centrale i bordi left e right, delle dimensioni delle colonne destra e sinistra e del colore desiderato.

Se vuoi uno sfondo con immagine potresti aggiungere un altro div contenitore al tuo contenitore attuale, avendo così due contenitori che avranno la stessa altezza.
Applicando poi al primo una imamgine di sfondo sinistra e all'altra una di destra.

[Fede 88]

Il fatto è che le due DIV a lato poi mi servirebbero per mettere dei bottoni che verranno utilizzati per sfogliare le pagine.

[Fede 88]

Ho provato ad aprire la pagina su firefox ed è tutto completamente sballato, è normale che firefox gestisca le div in modo completamente diverso da internet explorer?

[MEMon]

Si un pò di differenza c'è per certe cose.
Comunque nei div a lato ci puoi poi mettere quallo che vuoi, mica li devi eliminare, solo che non saranno dell'altezza della colonna maggiore, ma avranno l'altezza necessaria per contenere il loro contenuto.

[Fede 88]

Si un pò di differenza c'è per certe cose.
Il fatto è che qui più che cercare le differenze si tratta di capire se sta visualizzando veramente la stessa pagina.
La posizione delle div e le dimensioni sembrano fatte a caso.


Comunque nei div a lato ci puoi poi mettere quallo che vuoi, mica li devi eliminare, solo che non saranno dell'altezza della colonna maggiore, ma avranno l'altezza necessaria per contenere il loro contenuto.

A ok quindi dici di mettere le container lo sfondo con i bordi e le 2 div laterali farle trasparenti in modo da far vedere lo sfondo. Giusto?

[MEMon]

Il fatto è che qui più che cercare le differenze si tratta di capire se sta visualizzando veramente la stessa pagina.
La posizione delle div e le dimensioni sembrano fatte a caso.

Eh beh van presi alcuni accorgimenti quando si sviluppa un css, a farza di sbatterci la testa poi realizzerai css che visualizzano la stessa cosa in entrambi i browser senza troppe difficoltà.
Ricordati poi che esistono anche opera e safari, ed IE7 e IE6 :asd:


A ok quindi dici di mettere le container lo sfondo con i bordi e le 2 div laterali farle trasparenti in modo da far vedere lo sfondo. Giusto?
Esatto.

[Fede 88]

Eh beh van presi alcuni accorgimenti quando si sviluppa un css, a farza di sbatterci la testa poi realizzerai css che visualizzano la stessa cosa in entrambi i browser senza troppe difficoltà.
Ricordati poi che esistono anche opera e safari, ed IE7 e IE6 :asd:


Si, non li dimentico, però mi sa che è meglio che risolvo i problemi un brower alla volta.

Un'altra domanda:
Per centrare un div all'interno di un'altro div, basta che metto come proprietà del container allineamento testo centrato o devo usare il metodo che si usa per centrare un div all'interno della pagina?

[MEMon]

Si, non li dimentico, però mi sa che è meglio che risolvo i problemi un brower alla volta.

Un'altra domanda:
Per centrare un div all'interno di un'altro div, basta che metto come proprietà del container allineamento testo centrato o devo usare il metodo che si usa per centrare un div all'interno della pagina?

meglio la seconda