Q: fixed padding of 3px inside container that has percent width I am looking for a solution to add 3px padding (always must be 3px) inside a container that has not a standard width but percent.
Here is the problem. I have a form framework that has a label of 20% and form element of 80%
Inside the container that holds the form element (80%) a want to have a 3px padding to wrap the form element with a background. This mean that the form element will have a 3px background no more and no less.
I have tried some solutions but nothing works so far because i have to create a container width 80% percent and 3px padding and inside to set the width of the form element as (80% - 3px).
Sample code
<div id="formRow">
   <label style="width:20%;float:left;"> Label </label>

   <div id="formElement" style="width:80%;float:left;"> 
      <input type="text" width="???????????" />
   </div>
</div>

Can anyone help me to achieve that?
Thanks

A: @nthan ; you can use css3 property box-sizing like this
CSS:
#formElement{
 padding:3px;
 -moz-box-sizing:    border-box;
 -webkit-box-sizing: border-box;
 box-sizing:        border-box;
 width:80%;
}

note: it's not work in IE7
EDIT:
If you didn't want to use css3 then you can give margin to it's child div instead of giving padding to it's parent div.
#formElement input{
 margin:3px
}

may be that' work for you.enter code here
EDIT 2
check this link it's work http://jsfiddle.net/sandeep/Yf2zY/

A: Try Removing the Float:left form your formElement Div and adding style="border:solid 1px #333; padding:5px;" to the formRow div

A: Try this:
<div id="formRow" style="padding:0px 6px 0px 0px;">
   <label style="width:20%;float:left;"> Label </label>

   <div id="formElement" style="width:80%;float:left; padding:3px;margin-right:-6px"> 
      input
   </div>
</div>

