Altezza Div uguale all'altezza di un altro Div

Vorrei sapere se è possibile fare che l'altezza della di un Div sia uguale all'altezza di un altro div (in questo caso sono uno a fianco dell'altro) la cui altezza è variabile in base al contenuto attraverso i Css.
S'è possibile, senza ricorrere alle colonne false.

EDIT:

Questi sono i css dei due div

Codice:

---

.twoColFixLtHdr #sidebar1 {
        float: left; /* poiché questo elemento è mobile, occorre specificare una larghezza */
        width: 220px; /* il colore di sfondo verrà visualizzato per tutta la lunghezza del contenuto all'interno della colonna, ma non oltre */
        padding: 15px 10px 15px 20px;
        border: thin solid;
        height: 550px;
}
.twoColFixLtHdr #mainContent {
        margin: 0 0 0 250px; /* il margine sinistro di questo elemento div crea la colonna sul lato sinistro della pagina; indipendentemente dalla quantità di contenuto presente nel div sidebar1, lo spazio della colonna rimane inalterato. Ã%u02C6 possibile rimuovere questo margine se si desidera che il testo del div #mainContent riempia lo spazio di #sidebar1 quando il contenuto di #sidebar1 finisce. */
        padding: 0 20px;
        color: #FFF;
                min-height: 580px;
        background-color: #000;
        border: thin solid;
}

---

Il primo è il div che si deve adattare all'altro div, che sarebbe il secondo.



Al massimo, se non fosse possibile, si può fare che il div abbia il bordo tranne in basso, cioè ai lati e al lato superiore sì, al lato inferiore no.

O ancora, visto che sotto questi due div c'è un altro div lungo quanto la larghezza della pagina, il div arrivi fino a dove inizia questo div "basso".

PS: Non mi compare il tasto edit.

Potresti fare dei div due celle di una tabella (mediante la proprietà display), altrimenti attualmente non c'è soluzione con sono CSS per realizzare ciò che ti serve.
Se comunque indichi l'indirizzo della pagina in questione (seppure incompleta) è possibile darti qualche consiglio o indicazione in più.

Equal Height Columns with Cross-Browser CSS :wink:

Citazione:

---

Originalmente inviato da karl94

Potresti fare dei div due celle di una tabella (mediante la proprietà display), altrimenti attualmente non c'è soluzione con sono CSS per realizzare ciò che ti serve.
Se comunque indichi l'indirizzo della pagina in questione (seppure incompleta) è possibile darti qualche consiglio o indicazione in più.

---

Una di quelle pagine:
http://astropvt.altervista.org/Nuova...la/saturno.php

Vorrei che il div sinistro sia lungo quantoquello di destra che è variabile in base al contenuto.
Nei link contenuti nel div sinistro potrai vedere altre pagine.


questo è il css:

Codice:

---

@charset "utf-8";
/* CSS Document */
body  {
        font: 100% Verdana, Arial, Helvetica, sans-serif;
        background: #666666;
        margin: 0; /* è buona norma impostare a zero i valori margin e padding dell'elemento body per tenere conto delle diverse impostazioni predefinite dei browser*/
        padding: 0;
        text-align: center; /* centra il contenitore nei browser IE 5*. Il testo viene quindi impostato con l'allineamento predefinito a sinistra nel selettore #container */
        color: #FFF;
        background-image: url(../immagini/sfondo.gif);
}
.twoColFixLtHdr #container {
        width: 1000px;
        margin: 0 auto; /* i margini auto (insieme a una larghezza) centrano la pagina */
        border: 1px solid #000000;
        text-align: left;
       
}

.twoColFixLtHdr #header {
        padding: 0 10px 0 20px;  /* questo padding corrisponde all'allineamento a sinistra degli elementi nei div sottostanti. Se in #header viene utilizzata un'immagine anziché un testo, può essere utile rimuovere il padding. */
        border: thin solid;
}
.twoColFixLtHdr #header h1 {
        margin: 0; /* azzerando il valore margin dell'ultimo elemento del div #header si evita la compressione del margine, con la creazione di uno spazio inspiegabile tra i div. Se il div è circondato da un bordo, questo accorgimento non è necessario perché anche il bordo impedisce la compressione del margine */
        padding: 10px 0; /* l'uso del valore padding al posto di margin consente di distanziare l'elemento dai bordi del div */
        text-align: center;
}
.twoColFixLtHdr #sidebar1 {
        float: left; /* poiché questo elemento è mobile, occorre specificare una larghezza */
        width: 220px; /* il colore di sfondo verrà visualizzato per tutta la lunghezza del contenuto all'interno della colonna, ma non oltre */
        padding: 15px 10px 15px 20px;
        border: thin solid;
        height: 550px;
}
.twoColFixLtHdr #mainContent {
        margin: 0 0 0 250px; /* il margine sinistro di questo elemento div crea la colonna sul lato sinistro della pagina; indipendentemente dalla quantità di contenuto presente nel div sidebar1, lo spazio della colonna rimane inalterato. Ã%u02C6 possibile rimuovere questo margine se si desidera che il testo del div #mainContent riempia lo spazio di #sidebar1 quando il contenuto di #sidebar1 finisce. */
        padding: 0 20px;
        color: #FFF;
                min-height: 580px;
        background-color: #000;
        border: thin solid;
}
.twoColFixLtHdr #footer {
        padding: 0 10px 0 20px; /* questo padding corrisponde all'allineamento a sinistra degli elementi nei div sovrastanti. */
        background:#DDDDDD;
}
.twoColFixLtHdr #footer p {
        margin: 0; /* azzerando il valore margin del primo elemento del footer si evita il rischio di compressione del margine, con la creazione di uno spazio tra i div */
        padding: 10px 0; /* il padding di questo elemento crea uno spazio, così come avverrebbe specificando un valore margin, senza il problema della compressione del margine */
}
.fltrt { /* questa classe può essere utilizzata per rendere mobile un elemento a destra nella pagina. L'elemento reso mobile deve precedere l'elemento al quale deve essere affiancato sulla pagina. */
        float: right;
        margin-left: 8px;
}
.fltlft { /* questa classe può essere utilizzata per rendere mobile un elemento a sinistra nella pagina.*/
        float: left;
        margin-right: 8px;
}
.clearfloat { /* questa classe deve essere inserita in un elemento div o break e deve essere l'elemento finale prima della chiusura di un contenitore che deve contenere per intero un elemento mobile */
        clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}

#sidebar1 ul li
{
        list-style-type:none;
        color: #FFF;
}

#login, #personale
{
        width:100%;
        height:30px;
        vertical-align:middle;
}

.dati_pianeta
{
        border:#099 solid thin;
        color:#000;
        background-color:#CCC;
}

.dati_pianeta td
{
        width:220px;
}


.dati_pianeta caption
{
        background-color:#FFF;
}

#mainContent a,#mainContent a:link,#mainContent a:visited,#mainContent a:active
{
        color:#F00;
}

a, a:link,a:visited,a:active, #mainContent #login span a,#mainContent #login span a:link,#mainContent #login span a:visited,#mainContent #login span a:active
{
        color:#FFF;
        text-decoration:none;
}

#sidebar1 img
{
        margin-top:1px;
}

---

Hai letto la mia risposta? :roll:

Citazione:

---

Originalmente inviato da biccheddu

Hai letto la mia risposta? :roll:

---

La tua risposta non ha fatto altro che farmi perdere 1 ORA per capire cosa avesse fatto quello che aveva creato quell' articolo, non ha fatto altro che allineare i colori sovrapponendo 3 div, infatti prova a ad analizzare il DIV del testo centrale, noterai che non arriva fino in fondo.

Citazione:

---

Originalmente inviato da GiradaSunList

La tua risposta non ha fatto altro che farmi perdere 1 ORA per capire cosa avesse fatto quello che aveva creato quell' articolo, non ha fatto altro che allineare i colori sovrapponendo 3 div, infatti prova a ad analizzare il DIV del testo centrale, noterai che non arriva fino in fondo.

---

Ciao GiradaSunList, al tempo (da notare 2011) la risposta era corretta. Probabilmente nell'arco di questi anni i browser hanno cambiato il loro comportamento oppure c'è un altro problema che non ne permette il funzionamento.

Ad oggi puoi ottenere lo stesso risultato utilizzando flexbox, ad esempio :wink: