CSS Layout Problem

[Clarkeez]

Hey..
I have a problem with my CSS, let me show you..

CSS

.wrap { font-size:12px; width:980px; margin:auto; }
.left_wrapper { height:auto; float:left; width:20%; background:#699; }
.right_wrapper { height:auto; float:right; width:79.7%; border-color:#b7b6b6; border-top-width:0px; background:#993; }

HTML

<div class="wrap">
  <div class="left_wrapper">
    blah blah
  </div>
  <div class="right_wrapper">
    blah blah
  </div>
</div>

Now, works all fine and this is the output i want
[img]http://i1104.photobucket.com/albums/h333/Clarkey4/903cf051.png[/img]

But, if I add ANY padding to left_wrapper in the css, this happens..
[img]http://i1104.photobucket.com/albums/h333/Clarkey4/2eb02c27.png[/img]

any guidance will be appreciated :)

[Arkinder]

The padding is causing the two elements to exceed the 980px width. Increase the width and it should stay.

Regards
Arkinder

[akhtar.web]

While you add padding left or padding right, you have to deduct from width that

padding. for i.e., left_wrapper width is 20% & right_wrapper width is 79.7% (80%) total

width is 100%, now you add 5% padding right to left_wrapper then you have to deduct 5%

from witdh of any one div ( left_wrapper or right_wrapper).

Regards,
Akhtar