[CSS]Rociąganie nadrzędnego diva w zależności od podrzędnego Opcje

[punoljoe]

Wiem , że temat jest odgrzewany , ale po kilkuuuu dobrych godzinach rozkminiania tego banalnego problemu mam dość. Chciałem rozciągnąć div#c1 i potem w ten sam sposób div#d1. Zróbmy jeden , a drugi będzie analogicznie rozwiązany.

[HTML] pobierz, plaintext 
 
 
<div id="x">
<div id="y"><br />PL | GB | D | FR | S &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br /></div>
 
<div id="z" ><br /> </div>
<div id="a" > <br /></div>
<div id="b" ><br /><br /> </div>
<div id="c" > 
<div id="c1" > 
 <br /><br /><br /><br /><br /><br />
</div>
</div> 
 
<div id="d" >
<div id="d1" >
 <br /><br /><br /><br /><br /><br /><br /><br />
</div>
 </div>
 
<div id="e" > <br /></div>
<div id="f" > <br /><br /><br /><br /></div>
 
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
html,body {
     background-color:orange;
     margin:auto;
width: 100%;
height:100%;
     text-decoration:none;
	  font-family:  Verdana;
	  line-height: 10px;
     }
 
div {
   margin: auto;
    border  : none;
    padding : auto;
 
}
 
#x {
width:100%;
}
 
#y {
background-color:#000;
width: 100%;
text-align: right;
clear: left;
float: left;
}
 
#z { 
width: 100%;
background-color:#FFF;
clear: left;
float: left;
}
 
#a { 
width: 100%;
background-color:#04B486;
clear: left;
float: left;
}
 
#b { 
width: 100%;
background-color:#007777;
clear: left;
float: left;
}
 
#c { 
overflow: hidden;
width: 100%;
clear: left;
float: left;
background-color:#FFF;
}
#c1 { 
width: 1000px;
background-color: red;
position:absolute;
left:50%;
margin-left:-500px;
}
 
 
#d { 
width: 100%;
background-color:brown;
 
  margin: auto;
        float : none;
display: block;
margin: auto;
padding:auto;
 
 
}
 
 
 
#e { 
width: 100%;
background-color:#FFF;
clear: left;
float: left;
}
 
#f { 
clear: both;
width: 100%;
background-color:#FFF;
}
[CSS] pobierz, plaintext 

próbowałem rozwiązania polegającego na wstawieniu clear:both;

[HTML] pobierz, plaintext 
<div id="c" > 
<div id="c1" > 
 <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div style="clear: both;"></div>
</div>
[HTML] pobierz, plaintext 

a nawet wynalazek typu :

[JAVASCRIPT] pobierz, plaintext 
function setheight() {
        if(document.getElementById('c1').offsetHeight > document.getElementById('c').offsetHeight) {
        document.getElementById('c').style.height = document.getElementById('c1').offsetHeight+'px';
        }}
[JAVASCRIPT] pobierz, plaintext 

jednak wciąż nie działa...
ktoś potrafi pomóc?