Witam,

mam problem z ułożeniem mojego przykładowego szablonu strony

Chodzi mi o to żeby na żółtym kolorze pojawiał się tekst, i pod wpływem jego pisania kolor będzie się wydłużał.
Jednak pod kolorami zielony, żółty, brązowy ma być jeszcze jeden blok, pomarańczowy, jest on schowany pod tymi górnymi kolorami (#okno6).
Ten pomarańczowy blok powinien obniżać się pod wpływem tego żółtego koloru.

Proszę o pomoc


Poniżej zamieszczam kod:

Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>strona mniejsze menu2010</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250" />

<!-- ImageReady Styles (strona mniejsze menu2010.psd) -->
<style type="text/css">
<!--

#main {
    
    width:950px;
    background-color: black;
    
    display:block;
}

#bh-01_ {
    
    left:0px;
    top:0px;
    display:block;
    width:950px;
    height:14px;
}

#okno1 {
      float:left;
      left:0px;
      width:428px;
      height:200px;
      display:block;
      background-color: red;
}

#okno2 {
      float:left;
      left:428px;
      width:522px;
      height:200px;
      display:block;
      background-color: blue;
}

#okno3 {
      float:left;
      left:0px;
      top: 214px;
      width:320px;
      height:342px;
      display:block;
      background-color: green;
}

#okno4 {
      float:left;
      left:320px;
      top: 214px;
      width:619px;
      display:block;
      
      background-color: yellow;
}

#okno5 {
  display:block;
      
      left:939px;
      top: 214px;
      width:11px;
      height:342px;
      background-color: brown;
}

#okno6 {
      
      
      display:block;
      position:relative;
      width:950px;
      height:147px;
      background-color: orange;
      
      
}

#blok1 {
  display:block;
      width:950px;
      height:556px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#FFFFFF;">
<center>
<!-- ImageReady Slices (strona mniejsze menu2010.psd) -->
<div  id="main">
    <div  id="blok1">
    
    
        <div id="bh-01_">
            <img id="bh_01" src="http://www.malgorzatawysocka.pl/a/images/bh_01.jpg" width="950" height="14" alt="" />
        </div>
    
        <div  id="okno1">
    
        </div>
    
        <div  id="okno2">
    
        </div>

        <div  id="okno3">
    
        </div>    
    
        <div  id="okno4">
            fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>
            fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>fsdf<br>
        </div>
    
        <div  id="okno5">
    
        </div>
        
    </div>
    
        <div  id="okno6">
        
        </div>

    

    
</div>    
    
<!-- End ImageReady Slices -->
</body>
</html>