Creating your first style sheet wasn't too hard. It seemed to make sense in some way. Height was there, borders all worked, margin and padding made some sense (if they didn't, remember that margin = outside, padding = inside). Background colors aren't too hard either. It's all in plain english. Next I'm going to teach you hos to position certain elements using a few different properties that aren't quite as straightforward as "background-color."

The first property you will need to know is the "position" property. This is used only to define how the element will be positioned, not where it is positioned. We will start with the "#left" division, placing it seemingly in front of the "#right" division by the time we're finished.

The first thing to do is to make #left have an absolute positioning. This ignores whatever is around it, and sticks itself wherever you tell it to, regardless of what's in the way. To do this, we creat the style "#left," and put the property "position" in the style with the value "absolute." You won't be able to see anything if you preview this, but that will come soon.

Now, we want to actually see something in this division, so we give it a backrground color. This can be any color you want, because once you know where the element is, the background color can go away. For the lesson, I'm going to use #96C (the same as the header). We will also want to make the division more than 0 by 0 pixels, so we'll give t a height of 600 pixels and a width of 200 pixels. Put these in the style.

When you preview the document, you should see a large box with the background color you chose just below the header. To show how absolute positioning can go wrong, we're going to tell the box to start at the top left corner. We do this by using the "top" and "left" properties. Give both these a value of "0px." When you preview again, your box should be over the header. We don't want this, so we change these values to the ones we want. left should be 5 pixels, and to should be 115 pixels. This assures that the box is where we want it. We're done with the left box now.

The right box is a bit trickier. First we give it a background color (I'm giving it the same as the rest of the boxes). Next, because we don't know the size of page people are going to use, we want to give it some content to make the division large enough to see. make the width and height "auto" so it will change with the size. Next, paste the text in the file loremipsum.txt into the #right division. When previewed, you should see a box of text dissapearing behind the left box. To correct this, we make the position absolute, and set three position values: top, left, and right. these values should be 115 pixels, 215 pixels, and 5 pixels respectively. Now everything should be positioned correctly.

Your final CSS document should end up looking like this:

body {
margin: 0px;
padding: 5px;
background-color: #9091A8; }

#header {
height: 100px;
margin-bottom: 5px;
background-color: #9966CC;
border: 2px solid #000; }

#left {
position: absolute;
top: 115px;
left: 5px;
width: 200px;
height: 600px;
background-color: #96C; }

#right {
position: absolute;
top: 115px;
left: 215px;
right: 5px;
height: auto;
width: auto;
background-color: #96C; }