Thankfully, there is a very simple and easy way to fix this.

The Solution

To fix this little annoyance, just add this one line of code to your textarea’s CSS:

textarea {
     overflow: auto;
}

That’s it! Easy, right? Now the scrollbar will only show when it’s necessary. In other words, it will be invisible until enough text is written in the textarea to grow beyond its bounds, in which case the bar will be shown.

Want to really kill that scrollbar?

Just add this line of code to your textarea’s CSS, and the scrollbar will never be shown, even if the user fills up the textarea!

textarea {
     overflow: hidden;
}

I wouldn’t recommend doing that unless you have a good reason, though, because you won’t be able to see what you’re typing into a textarea with that CSS. It can be useful sometimes, though. Try it out!

That being said, there are always those of us who like to customize our computers to crazy lengths just so that they look different from the “normal”. Thankfully, Mac has a lot of ways of doing just this (some of which I hope to write about in future articles), and one of them is by turning the menu bar at the top of the screen black with white text instead of the usual gray with black text.

How?

Let’s get down to the details:

1. Go download the Nocturne app from Blacktree.
2. Install the app by dragging it into the Applications folder on your Mac.
3. Start the app and open up the preferences by pressing Cmd + , (comma).
4. Under the “Menu bar” section, click the box that says “Invert menu bar”.
5. Enjoy!

Why not use a different theming app?

You might be wondering why I chose to use a big program like Nocturne (that has many other features besides menu bar inversion) instead of using an app specifically designed for changing the appearance of a mac (like ThemePark). The reason is that even though apps like ThemePark can change the menu bar background, they can’t change the menu bar font. So if you used ThemePark to make the menu bar black, the font would remain black as well, making the menus impossible to read. Nocturne, on the other hand, simply inverts the entire menu bar; so if you start out with a white menu bar with black text, you will end up with a black menu bar with white text.

The Problem

Everything went well with YAPB until I decided to upload my first photo to my blog. I created a new post, added a title, image, and description, and pressed submit. Then I waited. And waited. And waited. After quite a while, the web page decided to load for me and it spewed a rather cryptic error that went along the lines of “Warning: unlink() [function.unlink]: No such file or directory”. Below that it simply said “Error: file does not exist!” My super-geeky brain didn’t seem to be working well that day, so I couldn’t seem to decipher the error until I turned to my extra-super-geeky friend Google and asked him what I should do.

A quick search showed that many other people seemed to be having the same problem, and when I searched a bit deeper, I managed to trace the solution.

The Solution

It’s quite simple, really:

1. Login to your WordPress admin area.
2. Navigate to Settings > Miscellaneous.
3. In the Store uploads in this folder text box, enter “wp-content/uploads”.
4. Click the Save Changes button.

That’s it! For some reason, when WordPress says that the default upload folder is wp-content/uploads, it’s really lying. Either that, or YAPB is holding a knife to its back and making it lie. Either way, the above steps should solve your problem once and for all. You can now upload photos to your photoblog happily ever after.

Let me know in the comments if this solution works for you!

What are inline comment replies?

Inline comment replies is a feature that lets you reply to comments on a blog, and have your reply show up directly below the comment you are replying to.

Imagine this scenario: you’re reading an interesting article on one of your favorite topics, and after you finish reading, you decide to read through the comments and see what other people are saying about it.  You start going through the comments, and see one towards the top that’s from a guy who has a question about the article.  Since you have a lot of experience on the article’s topic, you immediately know the answer to his question and decide to answer it.  There’s only one problem – after that guy posted his question, 50 other people posted comments below his.  Now, if you were to post a comment in reply to his question, it would be so far away that he probably wouldn’t ever see it.  This is a pretty big problem, right?

Enter inline comment replies.  Now, if the blog you’re reading has this feature installed, you can simply click “reply” on the guy’s question, type your answer, and your comment will show up right below his (indented a bit so it stands out from all the other comments).  Pretty nice, right?  Or is it?

The problem

Though this may sound like a great feature, and in fact it is useful most of the time, there is one problem with it.  If you have an extremely popular blog that gets tons of comments within seconds of a new article being posted, then everyone is going to want to be one of the first to comment so that their website link is clicked most.  Normally, you could only do this if you literally sat on the site and clicked refresh every couple of seconds until a new article showed up, and then typed a comment as fast as you could.  However, with inline replies, you can just reply to the first comment on a post, and your reply is displayed right below the first comment.

If the first comment is an actual question, and the reply is an answer to that question, then this is fine.  But if the reply is nothing more than a way to get a link to the top of the comment list, then this can become a problem.

The solution?

The obvious solution for this is to simply not use inline comment replies on your blog.  However, sometimes it is a nice feature to have on your blog, and you don’t want to give it up.  So what do you do?

One thing you can do is manually delete comments that are obviously from people trying to just get to the top of the comment list.  The problem with this is the 1) the commenter might wonder where his comment went and get angry at you for deleting it or 2) the comment could actually have some good content in it, but doesn’t have anything to do with the comment it’s in reply to.  Deleting it would be removing legitimate content.

Another thing you could do is just move the reply comment to the bottom of the list.  The commenter might get annoyed that his comment was moved, but at least he didn’t get away with his scheme.

So now I ask you – do you worry about this on your blog, and if so, how do you prevent it from happening?

This can be extremely hard to do, especially if you have a lot of things to say, and a lot of people don’t even bother to sign up because of it.  Don’t give up on Twitter yet, however.  Though it may be hard to sum up your thoughts in 140 characters, there are ways that you slim them down without really removing any content.  I like to call it “making the most of your 140 characters”, and below I have listed a few of the ways you can do just that.

1. Shorten URLs

If you’re posting a URL in your tweet, then the best way you can cut down space is by using a URL shortening service.  Basically, you type your long URL into one of these services, and out pops a tiny URL that you can use in your tweets.  Here are a few of my favorite shorteners and why I like them:

• u.nu
  • It is the absolute shortest URL possible.  No url can be shorter than three characters, and that is exactly what u.nu is.  If you’re looking to make your URLs as short as you can, then this is the service for you.
  • After you shorten a URL, it gives you the shortened link, HTML code for the link, and even BBCODE for the link so you can use it on a website of forum without typing code.
  • To see information about a URL shortened with u.nu, simply put a question mark, “?”, at the end of it.  This shows you where the URL redirects to, when it was shortened, and how many people have clicked on it.
• tr.im
  • It has lots of extensions that let you access it from FireFox, your Mac dashboard, or any other browser.
  • It is very fast, which means you can shorten URLs with lightning speed.
  • After you shorten and post a URL to Twitter, you can see statistics on how many people clicked the link, where they are from, and more.
  • You can customize it so that it works just like you need it to.
• is.gd
  • It also has lots of extensions like a FireFox plugin, bookmarklet, Dashboard widget, and Mac app.
  • You can preview a shortened URL (see where it redirects to without actually going there) by putting a hyphen, ‘-’, at the end of the is.gd URL.
• bit.ly
  • Just like the two mentioned above, it gives you extensions like a FireFox plugin, bookmarklet, sidebar, and even a Gmail gadget.
  • You can see real-time analytics of how your links are doing, like how many people are clicking on them.
  • You can save your preferences and always use it the way you want.

Though those shorteners have extremely short domain names,

Note: If you’re looking for some good Twitter apps for your Mac, you should read another post here at TutWow named 7 Free Twitter Apps for Your Mac.

2. Remove multiple RT sources

In Twitter, when someone else tweets something cool and you want to tweet the same thing, you use something called a “Retweet”.  This is how it works: your friend Joe (username joe987) posts a link to an amazing portfolio, and you want to spread it around among your followers.  To do this, you copy his tweet, post it into a new tweet, and add “RT @joe987″ to the front of it.  This not only shows the cool tweet, but it also gives credit to the original tweeter.

Sometimes you see a retweet, or a tweet that already has a “RT @username” on it, but you want to share the tweet with your friends as well.  Most people just add another RT onto the front of the tweet (“RT @one RT @two tweet“), but this adds a bunch of extra characters that aren’t really necessary.  The important thing is that you give credit to the original tweeter, so to make the most of your tweet space, you should remove the first RT.  So if you had “RT @secondary RT @original tweet“, you would change it to just “RT @original tweet“.

3. Use one space at the end of sentences

As your grammar teacher used to tell you, “always use two spaces at the end of your sentences”.  This is great, if you’re writing articles or papers, but for Twitter, it just grows your tweets.  Though this may not save tons of space, it can help if you’re really pressed for characters.  For example, take a look at this tweet:

Hey tweeple!  How’s your day going?  I’m feeling great today, and I hope you are too.  I’m working on a new article for my blog.  How about you?

If you put that into Twitter, you’ll see that it’s four characters too long.  But if you remove the extra space between the sentences, you come out with an even 140 characters.  Not huge, but useful!

4. Use Contractions

Often, when tweeting, you talk about yourself, saying things like “I am eating spaghetti” or “I will go for a walk tomorrow”.  To save extra space, use contractions as often as possible.  So instead of the previous tweets, you would say “I’m eating spaghetti” or “I’ll go for a walk tomorrow”.

5. Substitute Letters for Words

Though I don’t recommend it since it looks rather unprofessional, you can replace words like “you” and “are” with their sound-alike letters “U” and “R”.  This saves lots of space, but as I said, you shouldn’t do it if you’re trying to sound professional.

One thing you can do that doesn’t look as unprofessional is use the “&” and “@” signs in place of “and” and “at”.  Since most people are used to reading these symbols every day, they won’t notice the difference as easily. (thanks Chris and Malcolm Coles for sharing this tip in the comments!)

A good website that does this for you automatically is Twonvert.  You just type in your original, long tweet, and Twonvert converts it to SMS shorthand on the fly.

6. Use multiple tweets

Ok, this might not be a way to make the most of your 140 characters, but the fact is, if you have something great on your mind and you can’t possibly let it out in 140 characters, then you’re going to need multiple tweets to convey your message clearly.  To do this, post the first half of your thought in the first tweet and the second half in the second.  True, this makes people read bottom up, but sometimes it’s necessary.

7. Remove unnecessary words

When we write, we often use words that aren’t really necessary or could be removed without taking away from our meaning.  As I said above, this can be good if you’re writing articles or a paper, but it doesn’t make sense for Twitter.  When tweeting, you should remove your flowery language and post just the basic meaning of what you’re trying to say.

For example, instead of writing “I am being filled with such an awesome sensation of joy and gratefulness that I can barely portray it with mere words”, you could just say “I’m happy”, or “I’m so happy I can’t describe it”.  See the difference in length?

Note: Thanks to Jaremy in the comments for this tip.

More?

There are many ways to shorten your tweets, as you can see.  Did I miss one of your favorite techniques?  Let me know in the comments below, and I’ll add it to the list.

Though most of the shortcut commands are documented in the Photoshop “Keyboard Shortcuts” dialog (see below), there are some “secret shortcuts” that aren’t documented anywhere.  Many of these shortcuts have already been found, and there are articles about them on Web Designer Wall and 11AM Design, to name a few.  However, I’m sure there are many other shortcuts that we haven’t found out about yet (and Adobe keeps adding more in each release).  I found a new one today, and I call it the “secret layer styles shortcut”.

Switching Between Style Dialogs

Here’s how you can use the new shortcut:  In Photoshop, double-click on a layer that you want to add styles to.  This will bring up the

When in the Photoshop layer styles dialog, you can press Cmd (Ctrl) + 0-9 and it will switch to the style corresponding with that number.  For example, if I have some text that I want to add an Outer Glow to, I would double-click on the text layer to open up the Blending Options dialog, press Cmd + 3 to switch to the Outer Glow tab, and enter the settings I want.

Sure, it might not be the most revolutionary shortcut in the world, but it can help to speed up your projects a bit, which is always great.

(thank you Everaldo for the key icon)

Now, a new age has arisen, the age of the blog.  Everyone seems to have one – may it be from WordPress, Blogger, Drupal, LiveJournal, or countless others – and they use it to talk about whatever they feel like – politics, entertainment, education, or that wonderful tortellini they had last night.  With the millions of blogs on the internet, many people wonder how they can give their blog a boost in traffic, get a good page ranking in search engines, or simply spread the word about it.

Below, I’ve put together 10 ways that you can get more traffic to and spread the news about your blog.  Enjoy!

1. Have Good and Relevant Content

The number one thing that you can do to ensure that visitors come to your blog, stay on your blog, and tell their friends about your blog, is to have good, relevant content.  No matter how good your design is, how much you tell other people about it, or even how high your page rank is, no one will come back to a blog that has junky content.  Notice that I also said relevant content, which is just as important.  If someone comes to your blog expecting to read about art, and they find themselves reading about your latest get-rich-quick scheme, they aren’t very likely to come back again.

2. Optimize for Search Engines

Search engine optimization (SEO) is a hot topic among web designers today.  Basically, it is a way to give your blog a higher rank on search engines such as Google, Yahoo!, Live, and Ask.  This is accomplished by doing things such as placing meta information at the top of your HTML files, not using too much Flash, and, as I said before, writing relevant content.  Here are a few articles to help you learn more about this interesting subject:

http://lorelle.wordpress.com/2006/01/15/dyi-search-engine-optimization/

http://www.webdesignerwall.com/general/seo-guide-for-designers/

http://www.cssnewbie.com/4-ways-css-can-improve-your-seo/

3. Set Up an RSS Feed for Your Posts

People are busy – they might love your blog and plan on coming back, but most likely they will forget.  So you need a way to remind them about it.  Meet the RSS feed.  If someone “subscribes” to your RSS feed, then whenever you post new content to your blog, they will either get an email about it, or they will see the new content in a feed reader.

There are many different ways to set up an RSS feed for your blog, but my favorite is FeedBurner because it is extremely easy to use and set up.  Most of the blogging platforms mentioned earlier (WordPress, Blogger, etc.) come built in with RSS feeds set up, but they give you very limited customization and analytics.  Feedburner, on the other hand, takes those bland feeds, and spices them up with lots of different options like email subscription, social bookmarking, ad imbedding, and many, many more.

4. Write Articles for Other Sites

Although this might be taking away content from your own site, if you write articles for other websites, then that will generate more traffic to your own website.  Make sure that the websites that you write for are big and get a lot of traffic; otherwise, you will just be taking away good content from your own blog.

5. Add Social Bookmarking Links to Your Posts

At the bottom of all of your posts, you should add links that “push” your article to the top of some of the most popular social bookmarking sites.  This way, if someone likes your post and “diggs” it, then it has more of a chance of being at the top of Digg (or whatever site), and more chance of generating traffic.  Here are the most popular social bookmarking sites:

Digg

Del.icio.us

Reddit

Stumbleupon

Design Float (if your blog has design-related content)

6. Submit Your Blog to a CSS Gallery

A CSS gallery is a website that showcases great use of CSS in design.  Of course, before you can submit your blog to one of these galleries, you will have to have a good CSS design, but if you do, then you will get a lot of traffic.  Here are some of my favorite galleries:

CSS Loaf

Best Web Gallery

CSS Drive

CSS Beauty

CSS Vault

7. Submit Your Tutorials to a Tutorial Listing Site

Do you write tutorials on your blog?  If so, there are a lot of sites that will list them for you, giving you some extra traffic.  Here are some of the major ones:

Pixel2Life

Good-Tutorials

Tutorialized

Tutcity

8. Start an Email Newsletter

As I said before, many people might love your blog’s content, but forget about it after a few weeks.  Another way to stop this from happening is to start a monthly email newsletter that gives news about the site, new articles, freebies, or whatever else you think might interest the readers.  Granted, some people might not actually read the entire newsletter, but they will be reminded of your blog, and hopefully come back.

9. Get Your Link in Anywhere

Put your blog’s link in your email signature, in your forum signature, in your forum “bios”, in the comments that you write for other blogs (in the text box that says “URL”, not the actual comment, or your comment might get marked as spam), in your IM status messages, on your t-shirt along with a funny quote, or anywhere else that you (legally) can.  True, some of these things might not generate that much traffic, but anything helps.

10. Tell Your Friends!

As simple as it may seem, telling your friends about your “cool new site” could actually rake in some more traffic.  If you tell your friends, and they tell their friends, etc., then this could be a great option.  Of course, it depends on if your blog has good content, if your friends are interested in the topics, and if your friends have a lot of friends.

Up till now, I always got frustrated over the Outer and Inner Glow styles not working the way I wanted them to.  I would create some random shape, and then set the outer and inner glow styles so that the shape would look something like a lightsaber, but it never worked quite how I wanted it.  Take, for example, the shape below:

As you can see, it has some tight angles, and if I put these styles onto it:

Blending Options

Outer Glow

Inner Glow

But that gives us the image below.  As you can see, there are white points poking out at almost all the corners.

So how do we fix this?  Well, as I found out, all you have to do is go into the Outer and Inner Glow options, and change the Technique from Softer to Precise.  That’s it!  So if we change the glow settings to this:

Outer Glow

Inner Glow

After we change those two settings, we get this:

And it’s fixed!  Now our shape is a nice glowing lightsaber, with no white corners poking out anywhere.

Then, after settling to be content with Google Analytics, I read an article on one of my RSS feeds that talked about a great new analytics program called Woopra that was still in Beta.  I thought it sounded interesting, so I headed over to the official Woopra website to take a look at the new rage.  What I found was truly amazing.  Not only was their website design awesome, but when I downloaded the actual Woopra Desktop Version, I just sat there with my mouth open.  Never before have I seen a program so extremely slick as this!

After I got past the first “wow” of the design aspect, I got another big “wow” out of the functionality of the program.  As I said before, I had always wanted to be able to see what visitors were on my website right at the moment I was on, but Google Analytics didn’t have anything like that.  However, when I downloaded Woopra, that was one of the first things I noticed.  Now, whenever I open up the Woopra Desktop Client, I go right to the “Live” tab, and see who’s on my website right at that moment.  Pretty cool, huh?

And that’s not all!  There are many, many other cool features of Woopra, some of which I’ve listed below:

• Website Statistics (obviously) – Total Visitors, Average Time Spent per Page, Page Views/Visit, Visits Today, New Visitors Today, Total Page Views, etc.
• Real-Time Analytics – You can see what people are doing right now.
• Easy Installation with WordPress – Just install the plugin, and you’re good to go!
• Real-Time Notifications – You can set up events that pop up when certain things happen – someone comes to your website, views a certain page, etc.
• Live Visitor Chatting –  If you see someone on your website that you want to have a conversation with, just click the “Start a Conservation” button in Woopra, and you can have a live chat with them!
• Visitor Tagging – If you know that one of your visitors is your friend, then you can “tag”, or “name” him something so that you will always know that it’s him.
• Impressive Search – You can search every visitor that every came to your website, find out his browser, OS, country, and language.
• Track Multiple Websites – You don’t have to just track one website, you can track all of your websites.

So that’s pretty much it.  If you haven’t tried out Woopra for yourself yet, then I really encourage you to head over to Their Website and take a look.  You won’t be disappointed!

Say you have coded an HTML file 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>CSS 100% Height</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum.<br /><br />
Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus. Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien.<br /><br />
Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna ultricies ac tempor dui sagittis. In condimentum facilisis porta. Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac euismod semper, magna diam porttitor mauris, quis sollicitudin sapien justo in libero. Vestibulum mollis mauris enim. Morbi euismod magna ac lorem rutrum elementum. Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper bibendum. Etiam scelerisque, nunc ac egestas consequat, odio nibh euismod nulla, eget auctor orci nibh vel nisi. Aliquam erat volutpat. Mauris vel neque sit amet nunc gravida congue sed sit amet purus.<br /><br />
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed ut dui. Morbi malesuada nulla nec purus convallis consequat. Vivamus id mollis quam. Morbi ac commodo nulla. In condimentum orci id nisl volutpat bibendum. Quisque commodo hendrerit lorem quis egestas. Maecenas quis tortor arcu. Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat consectetur, nisl orci bibendum elit, eu euismod magna sapien ut nibh. Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum malesuada non vel leo. Sed fringilla porta ligula egestas tincidunt. Nullam risus magna, ornare vitae varius eget, scelerisque a libero. Morbi eu porttitor ipsum. Nullam lorem nisi, posuere quis volutpat eget, luctus nec massa. Pellentesque aliquam lacinia tellus sit amet bibendum. Ut posuere justo in enim pretium scelerisque. Etiam ornare vehicula euismod. Vestibulum at risus augue. Sed non semper dolor. Sed fringilla consequat velit a porta. Pellentesque sed lectus pharetra ipsum ultricies commodo non sit amet velit. Suspendisse volutpat lobortis ipsum, in scelerisque nisi iaculis a. Duis pulvinar lacinia commodo. Integer in lorem id nibh luctus aliquam. Sed elementum, est ac sagittis porttitor, neque metus ultricies ante, in accumsan massa nisl non.
</div>
</body>
</html>

And you have a CSS file like this:

body {
	margin: 0;
	padding: 0;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	height: 100%;
}

That gives you this example file.  As you can see, the content box on that page doesn’t stretch to the whole height of the page, even though we added the “height: 100%;” line to the CSS file.  Why is that?

Let me give you a different way of thinking about HTML.  HTML is pretty much just a bunch of containers stacked inside each other.  So in our page, first we have the <html> container, then the <body> container inside of that, and finally the <div id=”content”> container inside of that.  When we put content into one of those boxes, it stretches that box and all the boxes containing that box so that they can hold the new content.  So when we put our text into the <div id=”content”> box, that box streches, which in turn stretches all of the boxes that it is in (in our case the <body> and <html> boxes).

When we put the “height: 100%;” style onto the <div id=”content”> box, what we are doing is telling it to stretch to the full height of the box that it is in.  In this example, the box that it is in is the <body> box.  So the <div id=”content”> box is 100% of the height of the <body> box.  Well, how tall is the <body> box?  It’s just as tall as the <div id=”content”> box, because we never told it how tall it should be!  So when we put the “height: 100%;” style onto the <div id=”content”> box, we are just telling it to be as tall as itself!

To fix this, we need to tell the <body> box to get bigger.  But then we run into the same problem with the <html> box – it is only as big as the <body> box!  So to fix our problem (to get the <div id=”content”> box to stretch the whole height of the page), we need to tell the <html> and <body> boxes to be the full height of the page.

So if we change our CSS file to this:

html {
	height: 100%;
}
body {
	margin: 0;
	padding: 0;
	height: 100%;
}
#content {
	background: #EEE;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	padding: 0 20px 0 20px;
	margin: auto;
	font: 1.5em arial, verdana, sans-serif;
	width: 960px;
	min-height: 100%;
}

And that’s it!  This is what we have now.  The content box is now stretched to the full height of the page!

Update: Thanks to some very helpful comments, I have updated the final CSS so that the #content div now has “min-height: 100%” instead of just “height: 100%”. This is so that if the content of the #content div extends beyond the height of the window, the background will expand as well.