Container sichtbar verlängern

[matibaski]

Moin!
Ich baue eine Webseite, und der Chef sagte, dass er mit dem Scrollen nicht einverstanden sei. Es soll sich ausdehnen. Ich habe overflow:auto; benutzt, damit man dann scrollen muss, wenn es mehr ist.

Ich verwende 3 Bilder zum Design.
Oben ein Standbild
Mitte ein Hintergrundbild das sich nach unten repetiert
Unten ein Standbild für den Footer


In der CSS sieht das so aus:

.top {
text-align:left;
width:918px;
height:141px;
background:url(images/hr.png) no-repeat;
}

.middle {
text-align:left;
width:918px;
height:369px;
background:url(images/middle.png) repeat-y;
}

/* Mitte: zu .middle Klasse */

.left {
text-align:left;
float:left;
padding:5px;
width:158px;
height:355px;
_height:369px;
}

.content {
text-align:left;
float:left;
padding:5px;
padding-left:9px;
width:560px;
height:355px;
_height:369px;
}

.right {
float:left;
text-align:left;
padding:6px;
width:145px;
height:355px;
_height:369px;
padding-left: 9px;
}
/* Ende Mitte */

.bottom {
clear:both;
text-align:center;
width:918px;
height:31px;
background:url(images/bottom.png) no-repeat;
}

Und die HTML sieht so aus (normal eigentlich):

<div class="middle">
  <div class="left">
   <?php
    // include
   ?>
  </div>
  <div class="content">
   <?php
    // hier ein include
   ?>
  </div>
  <div class="right">
   <?php
    // ein include
   ?>
  </div>
 </div>

Also:
Wie kann ich es machen, dass sich das gesamte Div ausdehnt? Also .middle, wenn sich der Inhalt vergrössert, sodass der Hintergrund mitgeht,
und
Wie kann man das machen, dass sich der Footer gleich mitbewegt?


MfG, matibaski

 

[gruenspan]

Wo ist dein Problem? Läuft Dein Inhalt über, wenn er größer ist als Dein Container? Dann lass die feste Höhenangabe für .middle weg. So passt sich das div immer dem Inhalt an.

 

[matibaski]

Hier kannst mal gucken.
Beispiel bei Kategorie Zimmer.

Baška voda


Ich werds mal so probieren, wie du es sagtest.



MfG, matibaski

 

[gruenspan]

Natürlich dürfen alle anderen div drumherum auch keine feste Höhe haben. ;)

 

[matibaski]

Hab bei dem gesamten .middle height auf auto gestellt, sowie bei den 3 Containern im .middle Container.

Baška voda

Es wiederholt den Background nun nicht -.-


stylesheet der 4 Container:

.middle {
text-align:left;
width:918px;
height:auto;
background:url(images/middle.png) repeat-y;
}

.left {
text-align:left;
float:left;
padding:5px;
width:158px;
height:auto;
}

.content {
text-align:left;
float:left;
padding:5px;
padding-left:9px;
width:560px;
height:auto;
}

.right {
float:left;
text-align:left;
padding:6px;
width:145px;
height:auto;
padding-left: 9px;
}

Ich weiss nicht, wieso das so ist -.-



MfG, matibaski

 

[gruenspan]

background:url(deinbild.gif); 
<!-- ist nicht korrekt, schreib statt dessen -->
background-image:url(deinbild.gif);
background-repeat:repeat-y;