wrapper div Opcje

[!Ci]

Tworze sobie obramowanie na rozne elementy za pomoca div. Stworzylem okno z 3 contenerami Header, Content, Footer. Do kazdego z nich dodalem po 3 div (top-left, top-middle, top-right,....). Otaczajace elementy zawieraja grafiki obramowania i kiedy dodam do elementu centralnego jakis obiekt, chcialbym zeby z rozszezeniem sie div'a poszerzyly sie rowniez grafiki(odpowiadajace za krawedzie). Jezeli wpisze rozmiary recznie wszystko jest ok, ale nie da sie tego automatycznie zrobic (taki automatyczny padding).

pozdrawiam

[!Ci]

Kod

<div style="width: 220px;">
             <div>
                 <div id="top-left-win">
                 </div>
                 <div id="top-middle-win">
                 </div>
                 <div id="top-right-win">
                 </div>
             </div>
             <div id="middle">
                 <div id="left-win">
                 </div>
                 <div id="middle-win">
                        <b>WSTAWIANY OBIEKT</b>
                 </div>
                 <div id="right-win">
                 </div>
             </div>
             <div id="bottom">
                 <div id="bottom-left-win">
                 </div>
                 <div id="bottom-middle-win">
                 </div>
                 <div id="bottom-right-win">
                 </div>
             </div>
            
         </div>

Style wygladaja tak:

Kod

#header,#top-left-win,#top-middle-win,#top-right-win {
     height: 28px;
}

#bottom-left-win,#bottom-middle-win,#bottom-right-win{
     height: 15px;
}

#middle
{
     clear: left;
}  

#bottom{
     clear: left;
}

#top-left-win{
     width: 9px;
     background: url(okno/top-left-blue.png) no-repeat;
     float: left;
}

#top-middle-win{
     /*padding-right: 20px;*/
     background: url(okno/top-middle-blue.png);
     float: left;
}

#top-right-win{
     width: 15px;
     background: url(okno/top-right-blue.png);  
     float: right;
}

#left-win
{
     width: 9px;
     background: url(okno/left-blue.png);  
     float: left;
}

#middle-win{

     float: left;
}

#right-win{
     width: 15px;
     background: url(okno/right-blue.png);
     float: left;
}

#bottom-left-win{
     width: 9px;
     background: url(okno/bottom-left-blue.png);
     float: left;
}

#bottom-middle-win{
    
     background: url(okno/bottom-middle-blue.png);  
     float: left;
}

#bottom-right-win{
     width: 15px;
     background: url(okno/bottom-right-blue.png);
     float: right;
}

Chcialbym, aby np. top-middle-win sam mi sie rozszezal. Moge to zrobic wpisujac styl padding, ale takich obramowan chce wiecej i nie bardzo mam ochote kopiowac ten kod wiele razy. Chcialbym, zeby to sie automatycznie robilo.