geteilter Hintergrund durch zwei Divs, die 100% hoch sind

[Noeden]

Hallo Leute,
komische Sache, ich bekomme es nicht hin.

folgendes Markup:

<div id="outerwrap">
  <div id="backgroundLeft"></div>
  <div id="backgroundRight"></div>
  
  <div id="content">
    <div id="innerContent">
    </div>
  </div>
</div>

Also ich möchte den content mittig positionieren und hinter dem Contentdiv links einen Verlauf mit einer 1px breiten sich immer wiederholenden Grafik machen und rechts daneben mit einer anderen Grafik. Diese endet dann in einem Farbton, der als Background-color fortgeführt wird. Ich hoffe ihr versteht was ich meine. Der Hintergrund soll dann mitscrollen, wenn ich auf der Seite nach unten scrolle. Bei meiner CSS-Notation ist der Hintergrund aber immer nur so hoch wie der am Anfang sichtbare Bereich. Das liegt bestimmt am position: absolute;. Wie schaffe ich es, dass #backgroundLeft und #backgroundRight so hoch sind wie #outerwrap, aber dennoch links und rechts (in z-Richtung) unter content liegen.

CSS:

html, 
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

#outerwrap {
  width: 100%;
  min-height: 100%;
}

#backgroundLeft {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 100%;
  background: url(../img/layout/bg_grad_dark.png) repeat-x #333;
  width: 50%;
}

#content {
  position: relative;
  width: 900px;
  margin: 0 auto;
}

#innercontent {
  height: 1000px;
}

Für Hilfe bin ich sehr dankbar

 

[Noeden]

Ingrid weiß es

#outerwrap {
  position: relative;
}

#backgroundLeft {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}

 

[SpiceLab]

Ingrid weiß es

Ingrid oder Ingrid? :suspekt:

 

[Noeden]

Die erste war mir behilflich

 

[Noeden]

Ist leider doch noch nicht erledigt. Da gibt es nämlich ein Problem und ich glaube, das kann man ohne Javascript nicht lösen.

Der body soll:
-mindestens so hoch sein wie das Fenster
und
-mindestens so hoch sein wie der höchste Inhalt.

Also gebe ich ihm min-height: 100% und height: auto. Denn wenn height gesetzt wäre, würde er nur so hoch sein wie das Browserfenster. (Bei zu langem Inhalt würde der Inhalt herausragen und mit overflow hidden würde man den Inhalt leider nur abschneiden).

Genau das gleiche gilt für den outerwrap.

Das bedeutet jetzt, dass der Hintergrund nur so weit geht, wie das content-div hoch ist. (Das kann ich nicht mit 100% height versehen, weil in der rootline kein Element eine vergebene Höhe hat. Warum habe ich ja schon erklärt.)

Sehe ich das richtig, dass meine einzige Lösung darin besteht, dass ich dem content eine feste min-height gebe, die dann für einige Auflösungen zu groß und für einige zu klein ist? Und ich dann den Feinschliff nur mit Javascript machen kann?

Danke

 

[djheke]

Du mußt html auch height:100% zuweisen.
Zu deinen Grafiken. Da solltest du mal nach Faux Columns googeln, oder du liest hier.
http://www.gipspferd.de/css/anleitung/a19/a19.php

mfg
Henry