Problema afisare Div-uri la marire Padding

[patricia]

Am 3 divuri organizate astfel:

Cod: Selectaţi tot

<div id="area-total">
  <div id="cat-imag">
    <img src="imag.jpg">
  </div>
  <div id="cat-descr">descriere... </div>
</div>

CSS-ul pentru ele este:

Cod: Selectaţi tot

#area-total{
    width:100%;
    height:146px;
    border-left-style:none;
    border-right-style:none;
    border-top:1px solid #E6E6E6;
    border-bottom:1px solid #E6E6E6;
    margin-bottom:36px;
    margin-top:13px;
}
#cat-imag{
    float: left;
    height:146px;
    width: 19%;
}
#cat-imag img{
  height: 128px;
    margin-top: 10px;  
}
#cat-descr{
   float: right;
    height: 109px;
    width: 76%; 
    margin-top:20px;
    border-left: 1px solid #E6E6E6;
    padding-left:30px;
    padding-top:7px;
}

Problema e ca daca incerc sa maresc padding-ul pentru #cat-descr imaginea mi se strica, acest Div nu mai apare in partea dreapta a Div-ului cu imaginea ci sub el.
Nu inteleg de ce, pentru ca w"idth" e stabilit pentru amandoua div-urile, iar padding nu inseamna marirea dimenssiunii ci inserarea de spatiu in jurul continutului unui div.

Suprafata /zona ocupata de un Div (sau alt element HTML de tip bloc) este egala cu lungimea (/inaltimea) [care de fapt se refera la continut] + padding + bordura + margine.
In mod standard, conform W3C, daca adaugi Padding, sau bordura, ori margine, acestea se adauga la dimensiunea continutului (width / height), spre exterior, ceea ce face sa se mareasca suprafata totala ocupata de acel element de tip bloc.

Daca vrei ca Padding-ul sa se extinda in interior (sa micsoreze zona continutului), se adauga proprietatea: box-sizing:border-box; , ceea ce face ca dimensiunile "width" si "height" sa fie masurate de la bordura.
Ca sa functioneze in Mozilla Firefox si IE8, se adauga asa:

Cod: Selectaţi tot

box-sizing: border-box;
-moz-box-sizing: border-box;      /* Mozilla Firefox */
-ms-box-sizing: border-box;       /* IE 8 */

In codul tau ar fi asa:

Cod: Selectaţi tot

#cat-descr {
  float: right;
  height: 109px;
  width: 76%;
  margin-top:20px;
  border-left: 1px solid #E6E6E6;
  padding-left:30px;
  padding-top:7px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
}