STOP PADDING EXTENDING THE BOX!

[Orionsbelter]

Ok here i have a problem am sure it's easily solved but can not find anything from a Google Search.

 

The issue is if i have a div box 300 x 30;

 

But if i add padding-left:20px; it will extend the box on the right side so the box will expand to 320 x 30.

 

Anyway to solve this?

[haku]

Yes. One problem you will find is that IE and other browsers deal with padding differently. FF and the other browsers include padding in the width, while IE adds padding to the width. Or the other way around, I always forget which is which. The secret is to use an inner div:

 

<div id="outer">
  <div id="inner">
    //content
  </div>
</div>

 

#outer
{
  width:300px;
  height:30px;
}
#inner
{
  margin-left:20px;
}

 

This will solve your problem in a cross-browser friendly manner.

[Orionsbelter]

Hi thanks for the reply, i already use this method lol, just i think it makes my code look messy. However i think it'll stick with it

[haku]

It's pretty standard as far as cross-browser compatible code goes. It's unfortunate that we have to do this, please point all complaints at Internet Explorer's complaints department.