automatische Höhenangleichung zwischen 3 Boxen

[ika]

Hallo Ihr Lieben,

ich hab da ein Problem von dem ich nicht weiß ob es lösbar ist, da meine CSS Kenntnisse recht flach sind.

Ich hab mal ein Bild mit angehangen um mein Problem zu verdeutlichen.
Webseite mit 4 Boxen.
News Box ist variable in der Höhe und passt sich je nach News-Meldungen an.
Daneben zwei feste Boxen, deren Höhe sich anhand der News-Box orientieren soll.
Am Ende eine Box mit Logoslider.

Ist es überhaupt mit CSS möglich, die Höhen von Box1 und Box2 anhand von der Höhe der News-Box zu identifizieren?

In meinen Kopf denke ich eine Rechnung in dieser Art:
a= b+c

a= Höhe von News Box
b und c = Höhe von Box 1 und Box 2

Ist sowas möglich? Also dass man a als gegeben annimmt. Es durch 2 teilt und die Höhen dann entsprechend auf die Boxen verteilt?

Oder gibt es dann Nebeneffekte? Weil die Seite 2x geladen werden muss? Einmal um die Höhe der Newsbox zu bekommen udn ein zweites Mal um die Boxen anzugleichen?

Ich hoffe Ihr könnt ein wenig Licht ins Dunkle bringen..

Liebe Grüße,
Ika

[djheke]

Das geht mit JavaScript

Code: Alles auswählen

    <script type="text/javascript">

   if ( document.getElementById("news").offsetHeight >
             document.getElementById("box1").offsetHeight +
             document.getElementById("box2").offsetHeight )

         {

          document.getElementById("box1").style.minHeight =
                    document.getElementById("news").offsetHeight / 2 + "px";
          document.getElementById("box2").style.minHeight =
                    document.getElementById("news").offsetHeight / 2 + "px";

      }


     </script>


Funktioniert aber nur, wenn #news immer die längste Spalte ist. Wenn nicht musst du das Scriptlein weiter ausbauen.

[ika]

Wow Danke Dir.

Du hast mri nicht nur meine Frage beantwortet sondern mir gleich noch ne Lösung mitgegeben. Tausend Dank.
Hab das Script noch etwas angepasst damit es den Zwischenraum zwischen den Boxen beachtet, aber ansonsten tut es das was ich will. Wahnsinn.

Beste Grüße,
Ika