[HTML/CSS]Footer div schuift over content

[Morrey]

Ik ben een beetje aan het klussen aan de website http://www.villabdk.nl en ik stuit op het volgende probleem.

In eerste instantie ziet de website er al redelijk uit, alles zit op zijn plaats (in IE7 en FF). Echter als ik het venster dusdanig verklein dat er een scrolbalk zou moeten komen, schuift de footer (met de logo's) over de tekst en het menu, zelfs tot over de header met villabdk erin.

Ik heb de website even schematisch zo verdeeld:

Header: met position absolute tegen de bovenkant aangeplakt

Main: met inhoud 108 px vanaf de bovenkant geplakt, hoogte niet explicit gedefinieerd

Footer: tegen de onderkant aangeplakt met een hoogte van 143 px.

Heeft iemand van jullie dit soort problemen gezien?

Alvast bedankt,
Maurice

[frickY]

Met position: absolute trek je dingen uit de flow, ze zullen dus niet meer tegen elkaar drukken en elkaar wegduwen, maar over elkaar heen vallen.

Geef je main een margin aan de onderkant zo groot als je footer om ruimte te creëren.

[Morrey]

Bedankt voor je commentaar, de scrollbalk verschijnt als ik dit probeer, echter de footer blijft nog steeds over de rest schuiven als ik het venster nog kleiner maak.

Hoe hebben ze op bijvoorbeeld http://www.industriacongres.nl dit wel goed voor elkaar gebleven? hier is de footer ook met een position absolute onder geplaatst, maar hij schuift nooit over de rest heen.

Groeten,
Maurice

[aOk]

Hier zijn heel veel artikelen over te vinden..
Een voorbeeldje staat hier :
http://www.netlash.com/log/sticky_footer_tutorial
http://www.wolfslittlesto.../stickyfooterexample.html

Je moet vooral om je absolute positions denken.. als iets groter moet worden afhankelijk van de content die erin zit moet je dit vaak juist relative maken.

[mithras]

Je hebt je voorbeeld te groot en te vol gemaakt om snel te kunnen zien waar het aan ligt. Zoals gezegd is het wel zeker dat je absolute positie hier een rol in speelt. Wat je beter kan doen is je header en footer buiten een container halen en vervolgens container en footer centraal positioneren. Je kan je menu en content dan laten floaten.

Het heeft nog wat finetuning nodig, maar dit is een goede opzet:

HTML:

<div id="header"><!-- hier je logo --> </div>
<div id="container">
  <div id="menu"> <!-- hier je menu --> </div>
  <div id="content"> <!-- hier je content --> </div>
</div>
<div id="footer"> <!-- hier je footer --> </div>

Cascading Stylesheet:

#header{
  width: 100%;
  height: 108px;
}
#container{
  margin: 0 auto;
  overflow: hidden;
}
#menu{
  float: left;
  width: 100px;
}
#content{
  float: left;
  width: 656px;
}
#footer{
  margin: 0 auto;
}