Getting Started

In this lesson, we'll learn how to make this page employing several <div> boxes laid out by being nested in "parent" <div>s.

Begin by making one of the colored boxes. You'll note a lot of <div> tags used in each individual box. It might pay to review Lesson 8. Here's the HTML code for one box:

<div class="boxes">
<div align="center">
<div class="title">BOX 1</div>
<a href="#">Link #1</a><br><br>
<a href="#">Link #2</a><br><br>
<a href="#">Link #3>/a><br><br>
</div>
</div>

The above code makes one of the colored boxes in the example. Take a good look at how many nested boxes are used to make only one of the colored boxes. It takes three.

The first box is the one given the CLASS "boxes". This is the overall frame for an individual box. The second box is given no CLASS, ID, or NAME. It's only used to center the text because Netscape and IE don't render the "text-align: center" declaration the same way. Netscape tends to want to center the whole table, not just the text in the table.

Finally, the there's a third box CLASSed as "title". This is the red box at the top. All of the above are positioned relatively with no "float:" or other positioning specified. The only thing styled in these boxes are their appearance and "position: relative".

Make one of these boxes and then copy the code to make three for the next stage.

The Left Column

If you make three of the above boxes and view them in a browser, you'll see that the boxes render on top of one another. That is because a <div> causes a line break if positioned relatively. To put a little space between the top and bottoms of the boxes, use simple HTML <br> tags after the closing </div> tags. One should do it.

If you code some content after the box's code, it will be presented below the boxes, not beside them. We need to make a column out of the boxes like we did when we made simpler columns in Lesson 09. To keep from having to code positions for each box, make a single <div> that surrounds all of the boxes.

Here's an example of what we're doing. You'll notice in the code that there's a <div id="parentbox">. This box contains all of the colored boxes and it's this "parentbox" that will be used to position all of the child boxes at once using the styling below:

#parentbox {
position: absolute;
top: 5px;
left: 5px;
}

Nothing to it. Just surround the little boxes with a parent box and then position the parent box. The child boxes will be positioned relative to this parent box.

To make the column, we did the same thing we did in Lesson 9 -- we gave the parent box an absolute position. The child boxes will line up according to their parent box. This really isn't all that different from nested <tables>.

Don't forget to set a "margin-left:" for the content ("p" element in this case) so the content will clear the boxes.

The Right Column

To move the column to the right, like this, we just style the "parentbox's" positioning like we've previously done for a right column:

#parentbox {
position: relative;
float: right;
}

Once the box is floated, you need to make a margin for your text content that will clear the boxes on the right side. Using a parent, layout box is much simpler than trying to float all of the individual boxes and getting them to line up vertically. Try doing this without a parent <div> and you'll see what I mean. The colored boxes want to line up side-by-side when floated.

Dual Columns

Here's the final example we'll code. It has both a left and right column of boxes. This is done by making two sets of colored boxes and nesting them in parent tags with different IDs. The different IDs are needed so we can tell one from the other in our CSS positioning.

Absolutely position the left column as we did previously. Now, float the right column. Tweak your margins and you're done. It's important to remember to style the child boxes with "position: relative" so they'll position themselves relative to their parent box and not the whole screen.

Summary & Exercises

You'll notice the same problems here that you did with the previous exercises. The only real difference is that you've made one set of boxes for display only and another set for positioning them. Practice coding dual column multiple box pages a couple of times before jumping into the Advanced CSS Layout Exam.

To Next Advanced CSS Lesson

Back To Advanced CSS Index