[XHTML] Zwei DIV Container sollen immer gleich groß sein

[Milaan]

Hallo!

Ich habe auf meiner Homepage zwei DIV Container, einer für den Inhalt der Seite und einen für eine Seitenleiste. Sieht ungefähr so aus:

<div style="float:left; width:500px; background:#ff0000"> INHALT </div>
<div style="float:right; width:200px; background:#00ff00"> SIDEBAR </div>

Problem ist nur wenn in INHALT DIV sehr viel Text so das das DIV wesentlich länger wird als das SIDEBAR DIV, was lediglich statischen Inhalt enthält, dann haben beide DIV Container eine unterschiedliche Länge. Unschön ist das die beiden Hintergrundfarben dann auch unterschiedlich lang sind.

Gibt es eine Möglichkeit das beide DIV Container sagen wir mal einfach "height:100%" haben und gemeinsam in die länge wachsen?

Hoffe ich konnte mein Problem verständlich erklären :-)

 

[Cobinja]

Eventuell hilft es, beide DIVs in ein übergeordnetes DIV zu verpacken, welches als position nicht static hat:

<div style="position:absolute; height: 500px">
  <div style="position:absolute;height:100%;float:left; width:500px; background:#ff0000"> INHALT </div>
  <div style="position:absolute;height:100%;float:right; width:200px; background:#00ff00"> SIDEBAR </div>
</div

absolute hat die Folge, dass Höhe und Position relativ zum nächsten Elternelement bestimmt werden, welches nicht static als position hat, wobei static als default verwendet wird, falls keine Angabe zu position gemacht wird.

 

[Milaan]

Danke für den Tipp... hat nur leider nicht geholfen. Durch die Angabe von position:absolute hat es mein ganzes Design zerlegt :-)

Eine Möglichkeit wäre einen Hintergrund zu machen der genau den Hintergrundfarben entspricht und ihn auf das umschließende DIV zu legen. Allerdings wollte ich genau das umgehen da dort bereits ein Hintergrund liegt der sich nicht wiederholen darf.