Page 1 of 1

CSS Probleem: Div aansluiten op een variabele div

Posted: Mon May 09, 2011 11:02 pm
by nofarmer
Ik heb een website met meerdere nested divs, waarbij 1 div een variabele hoogte heeft (zie voorbeeld: http://www.[spam].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"><jdoc:include type="modules" name="logo" style="xhtml"/></div>
<div class="contact" id="contact"><jdoc:include type="modules" name="contact" style="xhtml"/></div>
<div class="titel" id="titel"><jdoc:include type="modules" name="titel" style="xhtml"/></div>
</div>
<div class="lijn1"></div>
<div class="middle">
<div class="image" id="image"><jdoc:include type="modules" name="image" style="xhtml"/></div>
<div class="home" id="home"><jdoc:include type="component" /></div>
<div class="intro" id="intro"><jdoc:include type="modules" name="intro" style="xhtml"/></div>
</div>
<div class="lijn2"></div>
<div class="bottom">
<div class="menu1" id="menu1"><jdoc:include type="modules" name="menu1" style="xhtml"/></div>
<div class="menu2" id="menu2"><jdoc:include type="modules" name="menu2" style="xhtml"/></div>
<div class="menu3" id="menu3"><jdoc:include type="modules" name="menu3" style="xhtml"/></div>
<div class="menu4" id="menu4"><jdoc:include type="modules" name="menu4" style="xhtml"/></div>
<div class="image1" id="image1"><jdoc:include type="modules" name="image1" style="xhtml"/></div>
<div class="image2" id="image2"><jdoc:include type="modules" name="image2" style="xhtml"/></div>
<div class="image3" id="image3"><jdoc:include type="modules" name="image3" style="xhtml"/></div>
<div class="image4" id="image4"><jdoc:include type="modules" name="image4" style="xhtml"/></div>
</div>
<div class="footer">
<div class="disclaimer" id="disclaimer"><jdoc:include type="modules" name="disclaimer" style="xhtml"/></div>
</div>

CSS:
/* ##################### LAYOUT STYLES ##################### */

.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;
}