Panel tarzı CSS (Geri kalan genişliği kullanmak)

Aykut Önen in yorumu üzerine örneği düzeltmeye vakit bulamadım... Çalışan bir örnek bulmak için lütfen yorumları kontrol ediniz...

Panellerin genellikle şu tip bir yapısı vardır :

+----------------------------------------------------+
|                                                    |
|         başlık                                     |
+----------------------------------------------------+
| sabit   |  içerik                                  |
| genişlik|                                          |
| menü    |                                          |
|         |                                          |
|         |                                          |
|         |                                          |
|         |                                          |
|         |                                          |
|         |                                          |
|         |                                          |
|         |                                          |
+----------------------------------------------------+

Bu tip bir yapı için şöyle bir html kodu yazıyorum:

<div id="baslik"></div>

<div id="kapsayici">

    <div id="menu"></div>

    <div id="icerik"></div>

</div>

CSS kodunu da şöyle yazıyorum:

div#baslik {background-color:gray; height:100px; width:100%;}

div#kapsayici

{

    padding-left:150px; /*Dikkat : Sol menünün genişliği ile aynı*/

    width:100%;

}

div#menu

{

    height:auto;

    margin-left:-150px; /*Kendinden önceki padding i yok sayması için*/

    width:150px; /*Genişliği*/

}

div#icerik

{

    width:100%;

}

Böylece, “geri kalan genişliği kullanma” meselesine ana nesnenin padding değeri ve genişliği sabit nesnenin negatif margin kullanması ile bir çözüm üretmiş olduk.