Ebenen mitwachsen lassen

[Tobias Stening]

Hallo zusammen,

ich habe hier folgenden Aufbau:

<div id="content">
  <div id="menu"></div>
  <div id="pad"></div>
</div>
<div id="news"></div>

Die Styles dazu sehen so aus:

#content {
  width: 446px;
  float: right;
  margin-top: 5px;
  background-color: #A0AFCB;
}
#menu {
  width: 422px;
  background-color: #F7CB33;
  padding: 13px;
  border-bottom: 5px solid #FFFFFF;
  float: right;
}
#pad {
  padding: 12px;
  color: #000000;
}
#news {
  width: 213px;
  height: 372px;
  margin-top: 5px;
  background-color: #778CB3;
  color: #FFFFFF;
  padding: 4px;
}

Nun füge ich in den Bereich mit der ID "pad" Inhalte ein. Er ist also immer so lang, wie es für den Inhalt nötig ist. Damit wächst die Ebene "content" entsprechend dem Inhalt in "pad", was ja auch erstmal so gewünscht ist. Wie muss ich es nun gestalten, damit "news" immer genauso lang ist, wie die Ebene "content"?

Skizze (so soll es sein):

|-------|--------------------|
| news  | menu               |
|       |--------------------|
|       | pad                |
|       |                    |
|       |                    |
|       |                    |
|       |                    |
|       |                    |

Skizze (so ist es aktuell):

|-------|--------------------|
| news  | menu               |
|       |--------------------|
|       | pad                |
|       |                    |
|       |                    |
|       |                    |
|       |                    |
|-------|                    |
        |                    |
        |--------------------|

Ich bin für jeden Tipp dankbar.

Viele Grüße,
Tobias :-)

[Dennis]

Hi Tobias,

Nun füge ich in den Bereich mit der ID "pad" Inhalte ein. Er ist also immer so lang, wie es für den Inhalt nötig ist. Damit wächst die Ebene "content" entsprechend dem Inhalt in "pad", was ja auch erstmal so gewünscht ist. Wie muss ich es nun gestalten, damit "news" immer genauso lang ist, wie die Ebene "content"?

Wenn es darum geht, dass du in der linken Spalte ein Hintergrundbild hast, dass sich nach unten wiederholen soll (oder auch Hintergrundfarbe), dann würde ich außen rum noch mal ein <div> setzen, welches dann das Bild als Hintergrund mit repeat-y bekommt. Genauso habe ich es auch bei diesem Layout gemacht.

Eine andere Möglichkeite wäre vielleicht, dass du body auf min-height:100% setzt und dann den Elementen height:100% gibst - kann aber sein, dass du dann wieder Probleme mit dem IE bekommst.

MfG, Dennis.

[Tobias Stening]

Hi Tobias,

Wenn es darum geht, dass du in der linken Spalte ein Hintergrundbild hast, dass sich nach unten wiederholen soll (oder auch Hintergrundfarbe), dann würde ich außen rum noch mal ein <div> setzen, welches dann das Bild als Hintergrund mit repeat-y bekommt. Genauso habe ich es auch bei diesem Layout gemacht.

Ja, die linke Spalte hat eine Hintergundfarbe (background-color: #778CB3;). Damit das nicht so zerrissen aussieht, soll diese Hintergrundfarbe immer so weit herunter reichen, wie die rechte Spalte lang ist.
Ein repeat dürfte aber bei der Hintegrundfarbe nichts nützen, oder? Die füllt ja die Ebene eh immer komplett aus. Die linke Spalte ist einfach kürzer, als die rechte Spalte. Werde Deinen Tipp mal ausprobieren.

Ich bin schon am überlegen, ob ich das nicht mit Tabellen lösen soll.

Bin weiterhin für jede Idee dankbar.

Viele Grüße,
Tobias

[Maz]

Moinsen,

Ein repeat dürfte aber bei der Hintegrundfarbe nichts nützen, oder? Die füllt ja die Ebene eh immer komplett aus. Die linke Spalte ist einfach kürzer, als die rechte Spalte.

deswegen muss der Hintergrund ja dahinter kacheln. Also für ein Menu auf der linken Seite z.B. im Body und dort nur repeat-y.

[Ingo Turski]

Hi,

Ein repeat dürfte aber bei der Hintegrundfarbe nichts nützen, oder? Die füllt ja die Ebene eh immer komplett aus.

Vielleicht schaust Du Dir auch mal das einfachere Beispiel http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm an.

freundliche Grüße
Ingo

[Dennis]

Hi Tobias,

Ein repeat dürfte aber bei der Hintegrundfarbe nichts nützen, oder? Die füllt ja die Ebene eh immer komplett aus.

Genau, in diesem Fall, gibst du dem "Hintergrund-Div" einfach die Farber für die Navigation und gibtst dann dem "Content-Div" einfach wieder weiß als Hintergrund - dann hast du indirekt links einen farbigen Balken der runter geht.

MfG, Dennis.

[Maz]

Moinsen,

Stichwort "Faux columns" sollte Dir da helfen: http://www.byteshift.de/alistapart/fauxcolumns/

Grundsätzlich: Ein DIV "wächst" in der Höhe nicht mit nur weil ein anderes DIV "wächst". Wie dem beizukommen ist, liest Du im angegebenen Link.

[Tobias Stening]

Moinsen,

Stichwort "Faux columns" sollte Dir da helfen: http://www.byteshift.de/alistapart/fauxcolumns/

Grundsätzlich: Ein DIV "wächst" in der Höhe nicht mit nur weil ein anderes DIV "wächst". Wie dem beizukommen ist, liest Du im angegebenen Link.

Herzlichen Dank für den Link. Das sieht schon sehr danach aus, wie ich es brauchen könnte. Ansonsten habe ich ja jetzt auch ein Stichwort für Google. :-)

Viele Grüße,
Tobias