Part of the fun of having a CSS based site with dynamic content (like most blogs), is your ability to change the design of your site with relative ease. On a site like Blogging Tips, there are hundreds and hundreds of different pages with unique URLS. Can you imagine having to hand code design changes onto each any every one of those when you wanted to update the look of the site? No thanks. But thanks to CSS and a Content Management System like WordPress, the size of the header on every single one of those pages could be changed in about 3 seconds and one line of code. Behold the power of CSS.

You have all this great control of layout and design, but there are some things that you need to be extra careful with changing, especially once you are a few months down the road with your blog and you aren’t visiting your old posts very much (if at all) any more. I’m talking about the background color and width of your main content area.

Let’s say a few months ago you blogged something about Apple and included a screen shot like this:

Now you’ve decided to change up your theme a little bit and you are going with a lime-green background look. You didn’t go back and revisit all your old posts, but now your old post about Apple with the screen shot looks like this:

That nice drop shadow now just looks abrupt and weird. Even worse, let’s say that image was 500px wide. You’ve decide to shrink down your content area to 400px to fit another sidebar on your site.

Best case scenario : the image bursts out to the right awkwardly covering up some of the right sidebar content.

Worst case scenario : the main content area expands to make room for the image. Now the right sidebar, which was floated to the right, doesn’t have room to fit over there anymore so it gets pushed down below the content area which makes for a really awkward layout.

There are a couple of ways you can avoid these problems.