Div in Div - äußeres DIV soll "mitgehen"

[danielx11]

Hi Folks,

folgende Situation: Ich habe Ein äußeres DIV-Element:

#middle_bg {
    width:798px;
    background-image:url(images/loop.png);
    background-repeat:repeat-y;
    }

Und zwei innere Divs:

    <div id="middle_bg">
        <div style="width:200px; float:left;">
          <p>left </p>
          <p>sd</p>
          <p>sd</p>
          <p>sd</p>
          <p>sd</p>
          <p>s</p>
        </div>
        <div style="width:400px; float:right;">
          <p>right </p>
          <p>df</p>
          <p>d</p>
          <p>fd</p>
          <p>fd</p>
          <p>fd</p>
          <p>f</p>
        </div>
  </div>

Ich möchte, dass sich das äußere div, von der Länge her, entsprechend erweitert wenn sich die inneren Divs nach unten erweitern.

Das war zwar der Fall, wenn ich das äußere Div mit position:relative bestückt habe, nur leider wurde der Hintergrund dann nicht mehr angezeigt.

Hat jemand eine Idee wie man da vorgeht?

Besten Dank vorab!!

 

[mangaboy]

AW: Div in Div - äußeres DIV soll "mitgehen"

Hey du!

Ich würde spontan sagen das du die Höhe beim "#middle_bg" auf auto setzten musst!

Also " height:auto; " müsste die Lösung sein!

Lg

 

[MyBad]

AW: Div in Div - äußeres DIV soll "mitgehen"

Du musst die floats auch wieder beenden.

Dies erreichst du, in dem du unterhalb der inneren DIVs einfach ein weiteres DIV mit style="clear: both;" packst.

Als Tipp: Lagere alle CSS-Anweisungen aus.

 

[Myhar]

AW: Div in Div - äußeres DIV soll "mitgehen"

Dies erreichst du, in dem du unterhalb der inneren DIVs einfach ein weiteres DIV mit style="clear: both;" packst.

Damit hast du zwar prinzipiell Recht, jedoch ist es in 99% der Fälle nicht notwendig, zusätzliches Markup zu verwenden.
Mit

#middle_bg{overflow:auto; height:100%}

sollte das gewünschte Verhalten auch erzielt werden können.

L. G.

 

[danielx11]

AW: Div in Div - äußeres DIV soll "mitgehen"

Hey Leute! Ihr seid top! Mit clear habe ich es lösen können. Das Overflow klappt sicherlich auch. Besten Dank dafür!!!