[CSS] Footer veroorzaakt dubbele scrollbar

[koekiemonster]

Ik ben bezig mijn eigen site een kleine make-over te geven. Ik focus nu voornamelijk op de desktop presentatie. Mobiel krijgt straks meer aandacht.

Op de desktop heb ik een vreemd fenomeen. Zodra ik mijn footer meegeef top:300px; ontstaat er een tweede scrollbar, wat navigeren een ramp maakt.

Zie: *snip* spam; maak een testcase a.u.b.

Mijn footer sluit aan op een container die relatief geplaatst is, tevens met een top:300px;

CSS footer div:

code:

footer {
  position: relative;
  clear:both;
  background: #f5f5f5 url(images/footer.png) no-repeat top center;
  top: 300px;
  margin:0 auto;
  padding: 0 20px 0 20px;
  width:90%;
  max-width:1200px;
  height: 400px;
  border-bottom: 5px solid #6d0b9f;
  border-top: 5px solid #6d0b9f;
}

De footer sluit aan op een section met het id main. Hiervan is de volgende css gespecificieerd:

code:

#main {
  overflow: hidden;
  padding:1px 0 10px 1px;
  margin:0 auto;
  width:90%;
  max-width:1200px;
  background: #fff;
  margin-top:0.2em;
  padding-left:10px;
  padding-right:10px;
  border:1px solid #cecece;
  z-index:200;
  top: 300px;
  position:relative;
}

Resultaat is dubbele scrollbars en ik krijg het niet voor elkaar om gewoon een mooie footer onderaan te plaatsen. Ik zie iets simpels over het hoofd, maar wat?

[ Voor 4% gewijzigd door RobIII op 28-11-2014 22:24 ]

[Bosmonster]

Ik snap niet zo goed waar je al die positions voor nodig hebt, aangezien je gewoon 3 blokken hebt die onder elkaar vallen.

[Verwijderd]

Mag ik je HTML even zien?

[reshi]

Maak even een jsfiddle aan, dan kunnen we zien wat er gebeurd.

[Fontini]

Waarom maak je er dan niet gewoon block level elementen van (zijn ze overigens default al volgens mij) en haal je position, z-index, width, height, top, clear en overflow weg. Van beide elementen.

Verder hebben we natuurlijk een JSfiddletje of iets dergelijks nodig om je verder op weg te helpen .