Dynamischer Hintergrund bestehend aus 3 Divs positionierung

[AzRaIL]

Guten Abend community :)

Habe folgendes Problem:

Möchte meinen Content Bereich mit einem Dynamischen Hintergrund unterlegen. Html struktur sieht so aus

<div id="mid">   
   <div class="mid-top"></div>
    <div class="mid-mid"></div>
    <div class="mid-bot"></div>
</div>

Ist ein einfaches Kästchen oben und unten mit abgerundeten Ecken, mitte mit einem 1pixel Bild das sich immer wieder wiederholt. (ich weiß kann man auch mit css3 realisieren jedoch muss es so gemacht werden >IE9 usw.)

Css dazu:

#mid{float:left; width: 60% !important; position:relative;}
.mid-top  { background: url(../images/ContentTopBg.png) no-repeat; width: 515px; height: 11px; position: absolute; }
.mid-mid  { background: url(../images/ContentMidBg.png) repeat-y; width: 515px; height: 100%; position: absolute; top: 20px;}
.mid-bot  { background: url(../images/ContentBotBg.png) no-repeat; width: 515px; height: 11px; position: absolute; }

Leider habe ich das Problem dass der untere Div (mid-bot) nicht mitgeschoben wird sondern einfach an der Stelle bleibt, auch wenn sich der mid-mid Div vergrößert.
Kann mir jemand weiterhelfen?

danke und lg

 

[Tronjer]

Dein Problem heißt position: absolute.

 

[AzRaIL]

Ja habe ich mir auch schon gedacht, jedoch bringt es nichts wenn ich es rausnehme oder relative draus mache. Dann werden zwar Top und Bot Hintergrund angezeigt, die mitte aber nicht mehr. Ich verzweifel hier noch. Kannst du es mir bitte ein wenig leichter machen? :)

 

[Tronjer]

JKannst du es mir bitte ein wenig leichter machen? :)

Dann verkürze ich mich meine Aussage von oben. Dein Problem heißt position.

Zwei im HTML aufeinander folgende Div-Container schließen lückenlos aneinander, und ein Div wird immer so hoch wie sein Inhalt. Es sei denn, man hebt sie mittels CSS aus dem Textfluss, und das bewirken Eigenschaften wie float, position: absolute, aber auch positition: relative in Verbindung mit top.

Verwende für die Abstände ausschließlich margin und padding, kein position.

 

[AzRaIL]

und ein Div wird immer so hoch wie sein Inhalt.

Da lag dann wohl auch mein Fehler

der ganze code sah nämlich so aus:

<div id="mid">
    <div class="mid-top"></div>
    <div class="mid-mid"></div>
    <div class="mid-bot"></div>
    <div id="mid-inner">
        <jdoc:include type="message" />
        <jdoc:include type="modules" name="debug" />
        <jdoc:include type="component" />
    </div>
</div>

Der Inhalt wurde halt in einem seperaten Div "mid-inner" ausgegeben und ich zerbrech mir stundenlang den Kopf darüber wie das funktionieren soll. Ist es überhaupt möglich mit dieser Struktur einen Dynamischen Hintergrund hinzubekommen?
Hab jetzt den mid-inner ins mid-mid gepackt und alle position Tags auf relative geändert sowie float: left benutzt, sieht soweit gut aus! :) Obwohl ich da noch ein wenig Verständnisprobleme habe muss ich mir wohl nochmal angucken wie das genau war mit der Positionierung
Danke für die bisherige Hilfe :)