Problem mit Spaltendesign

[cb1982]

Ich habe hier ein Problem, das ich gerade nicht gelöst bekomme.

Es geht im Wesentlichen, in der unten stehenden CSS um den Inhaltsbereich.
Dort habe ich innerhalb von #content in #content_left und #content_right unterteilt
Unter #content kommt #footer

Es ist auch so, dass left und right immer so hoch werden wie Inhalt darin ist. Und darunter erscheint auch wie gewünscht der footer.

Was ich erreichen möchte ist aber, dass left und right beide gleich hoch sind und sich jeweils am längeren der beiden orientieren.
Wie kann ich das lösen?

Vielen Dank!
Christoph

#background {
    position: relative;
    width: 1300px;
    margin: 0 auto;
    background: url(/images/background.jpg);
}


#page {
    width: 980px;
    margin: 0px auto;
    border: 0px solid red;    
    color: #ffffff;
}


#menu {
    width: 100%;
    height: 116px;
    border: 0px solid red;
}


#menu_in {
    margin: 30px 0px 0px 250px;
}
.menu_item {
    margin: 0px 40px 0px 0px;
    font-family: Helvetica;
    font-weight: normal;
    font-size: 20px;
}


#menu_counter { 
    color: #ffffff;
    position: absolute;
    font-family: Helvetica;
    font-weight: normal;
    font-size: 30px;
    top: 30px;
    left: 30px;    
}


.menu_sponsor {
    position: absolute;
    background: url("/images/fritz.png");
    top: 30px;
    left: 1100px;
    width: 62px;
    height: 73px;
}


.menu_thw {
    position: absolute;
    background: url("/images/thw.png");
    top: 30px;
    left: 1180px;
    width: 62px;
    height: 73px;
}


#content {
    width: 100%;
    height: 100%;
    color: black;
}


#content_left {
    width: 70%;
    height: 100%;
    float: left;
    background-color: #ffffff;
}


#content_right {
    width: 30%;
    height: 100%;
    float: right;
    background-color: #ffffff;
}


#content_header {
    margin: 20px 0px 10px 50px;
    font-size: 18px;
}


#footer {
    clear: both;    
}


.news_container {
    margin: 10px 40px 10px 40px;
    padding: 25px 30px 25px 30px;
    border-top: 2px solid #3971a1;
    font-size: 16px;    
}
    .news_container h1 {
        font-size: 20px;
        font-weight: bold;
        padding:0;
    }
    .news_container img {
        width:570px;
        height:250px;
        margin-bottom: 20px;
    }
    
    
.right_container {
    padding: 20px 0px 20px 20px;
    margin-right: 20px;
    border-bottom: 2px solid #3971a1;


}
    .right_container img {
          width: 223px;
          height: 233px
    }
    .right_container h1 {
        margin: 10 30 0 0;
        padding-left: 10px; 
        border-bottom: 2px solid #3971a1;
        font-size: 18px;
    }    


.Logo {
  background-image: url("/images/logo_bsf.png");
  background-repeat: no-repeat;
  position: absolute;
  repeat: no-repeat;
  left: 205px;
  top: 135px;
  width: 336px;
  height: 292px;
  z-index: 119;
}

 

[Tronjer]

Das ist eigentlich recht einfach, Grundkenntnisse in JavaScript bzw. jQuery vorausgesetzt.

- Lies die Höhen der Container aus und schreibe sie in ein Array
- Sortiere das Array
- Nimm den größten Wert aus dem Array und weise ihn den Containern als neue Höhe zu.

 

[cb1982]

Das klingt in der Tat einfach. Eine reine CSS-Lösung gibt es demnach nicht?

 

[threadi]

Mit reinem CSS wäre faux columns das was Du suchst - denke ich:
Create Sidebars of Equal Height with Faux Columns

 

[Tronjer]

Threadi hat recht, die Aufgabe lässt sich auch mit faux columns lösen, was mir allerdings zu umständlich wäre.

Mal angenommen ich habe zwei Divs mit unterschiedlichen Höhen:

<div id="left" style="height:300px;width:100px;border:1px red solid;float:left;"></div>
<div id="right" style="width:100px;border:1px red solid;float:left;"></div>

Dann lassen die sich mit wenigen Zeilen jQuery glattbügeln:

$(function() {
    var containerHeight = [];
    $('#left, #right').each(function() {
        containerHeight.push( $(this).height() );
        $(this).height(containerHeight.sort().slice(-1) );
    });
});

 

[threadi]

Wovon ich aber wiederum abraten würde. Es geht um Gestaltung, die macht man per CSS. JavaScript zur Hilfe zu nehmen könnte Nutzer ohne JavaScript (ja, gibts wenige ..) beim Anschauen der Webseite irritieren. Außerdem macht es imho wenig Sinn für die Anpassung von Design eine mehrere KB große JavaScript-Bibliothek extra in die Seite einzubinden wenn man das gleiche auch mit wenigen Bytes CSS erreichen kann.

Noch eine dritte Möglichkeit wäre übrigens abhängig vom Design: wenn es lediglich darum geht die Färbung bzw. farbliche Gestaltung von 2 "Spalten" nebeneinander von oben bis unten verlaufen zu lassen, könnte man auch Hintergrundfarben oder -bilder verwenden. Wenn z.B. eine Spalte einen roten, die andere einen blauen Hintergrund haben soll, dann könnte man diesen als 1px hohe Grafik im body (oder einem umgebenden Element) platzieren und entsprechend wiederholen lassen.

 

[Tronjer]

Alles eine Frage der Philosophie. Ich arbeite an Portalen, die ohne JS zzgl. eingebundener Bibliotheken und Plugins nicht funktionieren würden. Bevor ich da bei Problemfällen nach aufwendigen CSS-Lösungen suche und diese eventuell noch browserübergreifend anpassen muss, schreibe ich lieber eine kleine Funktion.

 

[djheke]

Eine unter vielen CSS Lösungen wäre ein margin/float Lauot mit Clearfix.
Oder so: Gleichlange Spalten oder Trennlinien als Gestaltungsmittel mit den Pseudoelementen :before oder :after

 

[cb1982]

Hi!

Danke für die Zahlreichen Antworten.
Ich habe es jetzt tatsächlich mit einer kleinen Funktion gelöst.