DIV probleem: vraagstuk

Ik heb een speciale HTML pagina gemaakt speciaal voor dit topic.
Het is een soort opgave zoals het op een examen op school zou kunnen zijn :-D
Het antwoord, zal ervoor zorgen dat ik een gelijkaardig probleem op mijn eigen website kan oplossen dus alle hulp is welkom!

Het betreft volgende pagina:

http://www.thecastle.be/test/divprobleem.htm

De source code kan u gewoon met de rechtermuisknop vinden, er zijn geen externe CSS files, alle CSS staat in de pagina zelf in een Style block


Het probleem:
De blauwe DIV, heeft een padding van 50px rondom ( dus padding: 50px 50px 50px 50px; )
Toch is het blauwe gedeelte onder de groene DIV beduidend groter dan 50px,
namelijk 191px ( dit is 141px teveel )

De vraag:
Hoe kan deze pagina gefixed worden zodat die "onbekende" extra leegte van 141px verdwijnt?

Het is dus niet de bedoeling dat de volledige pagina wordt omgebouwd omdat het om een test-case gaat. Liefst zo weinig mogelijk aanpassen aan de structuur zelf, en enkel CSS-code aanpassen ( hier en daar een mogelijke <br/> of een extra <div> toevoegen om te fixen mag wel )


Alvast bedankt

Niet direct het antwoord op je vraag, maar probeer van de position-tag af te blijven. Je gaat zijn dat alles dan veel gemakkelijker gaat.