Padding property problem in nested <div>s

Hi everybody!

I'm trying to wrap my head around some strange bahaviour I'm experiencing with CSS - in particular the padding property - and was wondering if anyone would be kind enough to help me shed some light on it.

Here goes:

I have a XHTML page that consists of a series of <div>s that are styled by a CSS stylesheet, that specifies the width and height of the <div> tags. The <div> tags now sit next to one another perfectly, and there is no unwanted space between the <divs>s (that's a problem I was experiencing earlier).

Anyhow, my problem is this, for example, one <div> has an id of "logo" and is styled in the CSS stylesheet like this:

Code: Select all

#logo
{
  width: 304px;
  height:289px;
  float:left;
}

There is a background image in a wrapper <div>, that this <div> sits on top of. In order to fit in with this background, I need to insert content into this logo <div> 26px across. When I insert padding-left:26px, instead of simply starting the content 26px across and preserving the width and height property values, the div instead grows by 26px, causing all the other <div>s then lose their allignment. The solution seems to be to subtract 26px off the width value as shown here.

Code: Select all

#logo
{
  width:278px;
  height:289px;
  float:left;
  padding-left: 26px
}

Is there an easier way to specify where content should be placed within a <div> without having to alter the width properties, or is the solution indicated here the best practice?

Many thanks in advance for any help or feedback.

Actually, you've come up with the exact fix for your problem, and as far as I know, there isn't another way. It's quite normal actually.

Adding padding to either side of a <div> will in fact increase the <div>s width by that amount. The solution (the correct and only solution) is to simply decrease the {width:XXXpx} by that same amount.

You're learning fast.

Hey kerkalees.

Thanks a lot for the reply.