Contentvak en footer lopen niet door

Hallo,

Ik ben bezig met een pagina waar een boel fotos op moeten.. nu wil ik graag dat het contentvak doorloopt en de footer gewoon onderaan de pagina is..

http://www.roywinterbestratingen.nl/fotos

Kijk maar, het contentvak wil niet groter worden.. hoe kan ik dit aanpassen?

Alvast bedankt,

Voeg eens een clearfix toe.

Dit doe je als volgt.

Voeg het Volgende toe in je CSS:

.clearfix {
     clear: both;
}

En in je HTML achter de sluit tag van je div genaamd content.

<div class="clearfix"></div>

Overflow:hidden;
Geen height

Helpt allebij niks?

toevoeging op 11 juni 2012, 16:50:42:
of wil dit plaatje gewoon niet groter?

Ja, dat plaatje wilt gewoon niet groter .

Dus dan gewoon dat bovenste gedeelte en onderste eruitknippen, en dan contentvak groter maken en dan met height?

Als ik zo iets zie, dan gaan mijn haren behoorlijk overeind staan:
Maak het nou schaalbaar, en ga niet hele delen van je site een vaste breedte geven met Photoshop.
Dit kan je prima met een divje doen, en rounded corners.

Zo ver had ik niet eens gekeken.
Probeer het zelf maar eens. Wat je nodig hebt:

http://css3generator.com/ en dan de "Border Radius en Box Shadow"
http://www.colorzilla.com/gradient-editor/ Voor de gradient in het midden.

Wil je het in http://css3pie.com/

Wil je hem elke browser hebben? Maak 3 divs aan,

Voorbeeld;

#TopRand{
    background:url("./img/top.png");
}
#content{
    background:url("./img/content.png");
}
#underRand{
    background:url("./img/bottom.png");
}

Dat kan echt geen kwaad, en is cssvalid

Dan krijg je nog steeds je gradient niet goed...

@peeters, echt wel. Ik leg het beter uit.

#TopRand zet je helemaal boven aan. En die sluit je ook meteen. Dan Gebruik je #content voor je afbeeldingen, die laat je gewoon naar beneden lopen. Dan "sluit" je het weet met #underRand.
Dan krijg je ongeveer zoiets;

CSS (moet ie wel verder aanpassen naar wens):

#TopRand{
    background:url("./img/top.png"); 
    background-repeat:no-repeat;
}
#content{
    background:url("./img/content.png");  
    background-repeat:repeat-y;
}
#underRand{
    background:url("./img/bottom.png"); 
    background-repeat:no-repeat;
}

HTML komt er zo uit te zien:

<div id="TopRand"></div>
     <div id="content">
    <!-- Images -->
     </div>
<div id="underRand"></div>

Probeer het maar uit

Ik snap natuurlijk wat je bedoeld. Maar hij maakt gebruik van een Circle gradient ofzowiets.
En dat gaat er heel raar uitzien als je dat gaat repeaten.

Ik zou het zo doen:

HTML:

<div id="Content">
  <!-- Hier je afbeeldingen -->
</div>

CSS:

#Content {
  background: #eeeeee; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, #eeeeee 0%, #cccccc 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#eeeeee),     color-stop(100%,#cccccc)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover, #eeeeee 0%,#cccccc 100%); /*   Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover, #eeeeee 0%,#cccccc 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover, #eeeeee 0%,#cccccc 100%); /* IE10+ */
  background: radial-gradient(center, ellipse cover, #eeeeee 0%,#cccccc 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=#eeeeee,   endColorstr=#cccccc,GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  -webkit-box-shadow: 1px 1px 3px 1px #84848 ;
  box-shadow: 1px 1px 3px 1px #84848 ;
  -webkit-border-radius: 7px;
  border-radius: 7px;
}

Ik krijg het niet voor elkaar..

iemand die dit wil doen kan 0.5pt verdienen!

Moet vandaag klaar!