CSS Probleem: Div aansluiten op een variabele div

[nofarmer]

Ik heb een website met meerdere nested divs, waarbij 1 div een variabele hoogte heeft (zie voorbeeld: http://www.mijntijdelijkewebsite.nl/lochter/) het gaat hierbij om de div met de grote afbeelding. Wanneer ik op bijvoorbeeld contactformulier druk wordt deze parent-div (middle) groter. Echter de onderste 2 parent-divs (bottom & Footer) gaan niet mee naar beneden. Hoe kan ik dit oplossen?

HTML:
<div class="top">
<div class="logo" id="logo"></div>
<div class="contact" id="contact"></div>
<div class="titel" id="titel"></div>
</div>
<div class="lijn1"></div>
<div class="middle">
<div class="image" id="image"></div>
<div class="home" id="home"></div>
<div class="intro" id="intro"></div>
</div>
<div class="lijn2"></div>
<div class="bottom">
<div class="menu1" id="menu1"></div>
<div class="menu2" id="menu2"></div>
<div class="menu3" id="menu3"></div>
<div class="menu4" id="menu4"></div>
<div class="image1" id="image1"></div>
<div class="image2" id="image2"></div>
<div class="image3" id="image3"></div>
<div class="image4" id="image4"></div>
</div>
<div class="footer">
<div class="disclaimer" id="disclaimer"></div>
</div>


CSS:

.top
{
position: relative;
top: 0px;
height: 100px;
width: 930px;
left: 50%;
margin-left: -465px;
}

.lijn1
{
position: relative;
background-color: #cccccc;
height: 1px;
width: 100%;
}

.middle
{
position: relative;
height: 380px;
width: 930px;
left: 50%;
margin-left: -465px;
border: 0px solid #cccccc;
}

.lijn2
{
vertical-align: bottom;
position: relative;
background-color: #cccccc;
height: 1px;
width: 100%;
}

.bottom
{
position: relative;
top: 10px;
height: 280px;
width: 930px;
left: 50%;
margin-left: -465px;
}

.footer
{
position: relative;
height: 20px;
width: 930px;
left: 50%;
margin-left: -465px;
}

#logo {
position: absolute;
top: 0px;
left: 5px;
height: 76px;
width: 200px;
}

#titel
{
position: absolute;
top: 20px;
left: 210px;
height: 50px;
width: 350px;
}

#contact {
position: absolute;
top: 0px;
right: 10px;
height: 75px;
}

#image {
position: absolute;
height: 380px;
width: 930px;
}

#intro {
position: absolute;
top: 10px;
right: 10px;
height: 360px;
width: 220px;
z-index: 99;
}

#home {
position: absolute;
left: 10px;
width: 910px;
z-index: 59;
}

#menu1{
position: absolute;
height: 145px;
width: 220px;
left: 10px;
}

#image1{
position: absolute;
height: 146px;
width: 218px;
top: 30px;
left: 11px;
}

#menu2{
position: absolute;
height: 145px;
width: 220px;
left: 240px;
}

#image2{
position: absolute;
height: 146px;
width: 218px;
top: 30px;
left: 241px;
}

#menu3{
position: absolute;
height: 145px;
width: 220px;
left: 470px;
}

#image3{
position: absolute;
height: 146px;
width: 218px;
top: 30px;
left: 471px;
}

#menu4{
position: absolute;
height: 145px;
width: 220px;
left: 700px;
}

#image4{
position: absolute;
height: 146px;
width: 218px;
top: 30px;
left: 701px;
}

#disclaimer{
position: absolute;
left: 10px;
bottom: 0px;
height: 20px;
width: 320px;
}

 

[klaaspeter]

Als ik de website bekijk ziet het er gewoon goed uit. Ik heb hem bekeken via ie9.

Maar mss zou het werken als je relative naar absolute zet, maar weet niet zeker.

Verder drukte ik perongeluk op verzenden bij het contact formulier en toen kreeg ik dit.

Heeft u een vraag, opmerking of wilt u meer informatie ontvangen. Vul onderstaand contactformulier zo volledig mogelijk in. Bedrijven Ontwikkeling Nijverdal neemt dan contact met u op.


Bedankt voor uw vraag/opmerking, wij nemen contact met u op.

Alleen denk ik niet dat het logisch is dat je bedankt voor de vraag/opmerking als ik helemaal niks heb ingevuld. Misschien zou je hierop kunnen controleren.