DIV-Höhe der eines anderen DIVs anpassen

[el muesli]

Hallo Forum,

ich habe 2 nach links gefloatete Container. Im 1. steht ein Artikel (also Text). Seine Höhe variiert je nach länge des Textes. Rechts daneben ist ein schmaler 2. Container, in dem kleine Bildchen, die zum Artikel gehören aneinandergereiht sind. Es kann vorkommen, dass die Liste der Bilder länger (höher) wird, als der Container mit dem Artikel.

Wie kann ich den Bereich für die Bilder genauso hoch machen, wie den Artikel und ihn mit ner Scrollleiste ausstatten?

Ich hoffe mein Problem ist klar geworden.

Beste Grüße, Andreas

[Kropff]

beispielcode? online-version verfügbar?

gruß
peter

[el muesli]

Hi. Das HTML-Gerüst sieht etwa so aus - online hab ichs nicht:

<div id="content">
  <div id="text" style="float:left;width:400px;min-height:300px;">
    Hier steht jetzt jede Menge Text...
  </div>
  <div id="bilder" style="float:left;width:150px;">
    Hier sind kleine Bildchen - mal mehr, mal weniger, je nach Artikel...
  </div>
</div> 

Es wäre sozusagen (schon) ausreichend, wenn #content immer genau die Höhe von #text annehmen würde...

Sinn und Zweck der Sache ist übrigens, dass die Seite an sich nicht zu lang wird und es unter dem Artikeltext keine freien Flächen geben soll.

Beste Grüße, Andreas

[highrise]

soweit ich weiß, gibt es keine reine CSS Lösung für dein Problem.

korrigiert mich, falls ich mich irre....

allerdings kann ich dir eine teillösung ertmal für den scrollbalken anbieten:

overflow:auto

dazu müsstest du noch mit einem JS die tatsächliche Höhe des #text containers ermitteln...

das ist nicht sonderlich schwer:

document.getElementById('text').offsetHeight erledigt das für dich...

du erhälst die höhe in pixeln als reinen integer (ganzzahl) wert

diesen musst du dann als neue Höhe für den Container #bilder verwenden...


in einer einzigen zeile Javascript sieht das dann so aus:

document.getElementById('bilder').style.height=document.getElementById('text').offsetHeight+'px';

das ganze natürlich nachdem die Divs bereits existieren.. entweder direkt am fuße des body, oder als funktionsaufruf oder mittels onload

Thema erledigt..

greetz, high

[el muesli]

Danke, das ist schonmal eine gute Lösung. Bisher brauche ich zwar noch kein Javascript in der Website, aber zur Not ginge das auch.

Vielleicht hat trotzdem noch jemand eine elegante CSS-Lösung?
Vllt auch durch Umstrukturierung?

[Click]

Also meines Wissens gibt's kein CSS1/2 weg 2 Containern die gleiche Höhe zuzuweisen. Das ist - meiner Meinung nach - etwas, was wirklich fehlt. Gäbe es sowas in CSS1/2 würde man ja auch keine Faux Columns benutzten.

Übrigens: In CSS3 soll es endlich machbar sein.