Defining the Background

You can use different backgrounds to define the content area inside the wrapper, and the unused area outside the wrapper.

Start with a simple color change. Add this markup to your wrapper div:

background: #FFFFFF;

Test it out. Mine is looking really ugly for a number of reasons. First of all, those are some bad color choices! Second, since there isn't much content, the wrapper doesn't stretch to the BOTTOM of the view portal in Internet Explorer. That's unfortunate.

A quick and ugly workaround could be to set the height of the wrapper div to something larger than most displays:

height: 900px;

Now test it out!

Using separate background colors is going to be a choice that you make as a web designer. Some sites call for a very strong delineation between the content area and the unused areas, some sites use a simple border, and some sites are all white! It's up to you! In the next lesson, we will work with background images!