I remember when I first started using CSS, something really ticked me off.  That was that when I had an HTML file with a div in it, and I wanted to add some padding to that div, not only did the content inside of the div get “padded”, but the whole div increased in size.  As you can imagine, this got really annoying, until one day I found the solution to the problem.

Let’s start with an example of the problem.  If I have the following HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>CSS Padding Problem</title>
		<link rel="stylesheet" href="style.css" media="all" />
	</head>
	<body>
		<div id="padded">I want this content to be padded.</div>
	</body>
</html>

And the following CSS:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#padded {
	width: 950px;
	margin: auto;
	background: #FFF;
}

Then I will get this result.  It looks pretty bad, because the div doesn’t have any padding on it.  This is where we run into the problem.  Here’s what I mean – if I edit the style.css file and add a “padding: 20px” to the #padded selector, then my CSS file will look like this:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#padded {
	width: 950px;
	margin: auto;
	background: #FFF;
	padding: 20px;
}

And in a web browser, the result of that change would look like this file.  Looks pretty good, doesn’t it?  However, if you switch back and forth between the first example and the second example, you’ll see that the div in the second example is a bit wider (40px exactly) than the first one.

By now you might be thinking “So what?  What’s the big deal with a div that’s a little bit wider than it should be?”  True, for some templates that you create, it won’t matter if a div is wider than it should be.  However, for designs that are more precise – i.e. they have been designed to be pixel-perfect – a little div width change could cause a lot of trouble.

So how do we fix this problem?  Well, there is a surprisingly simple way to fix this problem, and that is by wrapping the #padded div inside another div.  Here is what I mean – the new HTML file will look like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
	<head>
		<title>CSS Padding Problem</title>
		<link rel="stylesheet" href="style.css" media="all" />
	</head>
	<body>
		<div id="container">
			<div id="padded">I want this content to be padded.</div>
		</div>
	</body>
</html>

And the new CSS file:

body {
	margin: 0;
	padding: 10px;
	background: #EEE;
}
#container {
	width: 950px;
	margin: auto;
	background: #FFF;
}
#padded {
	padding: 20px;
}

As you can see, what I did is just wrap the #padded div inside another div called #container, and then moved all of the styles for the #padded div – except for the “padding: 20px” – to the styles for the #container div.

Take a look at the finished, “fixed”, padding example.  A very easy solution to a maybe not-so-easy problem.

As an Update, I found one shortcut list of CSS tricks from my web hosting friend. This is simple but a good refresher.