Geoff Hankerson

In the last installment we styled our pageContainer div by giving it a width of 791px. Today we want to style the following divs: columnContainer, leftPage and rightPage.

Let's start with columnContainer. This div holds the right and left columns. We can put a background images on this div and repeat it on the y axis (vertically) to give the illusion the left and right columns are of the same height aka faux columns. So here is our CSS for columnContainer:

This gets us a repeating background on the container columns grid. Now, lets make our columns work. In this design, the left and right columns are of equal length. So the parent div columnContainer is 791px wide, and each column should be half of that. Better yet, slightly less than half would be better to prevent IE6 from overflowing the width of the columns. Here are our column css declarations:

Now we should have this:

We need a little padding on the left and right sides. Right now we can add up to 11px total of padding to #leftPage and #rightPage without exceeding the width of the parent item (columnsContainer = 791px), but that is not enough. So a better strategy would be to wrap them in another div. So after leftPage and rightPage lets add another div with a class of pageWrap.

and add this to your css file:

This adds 15px of padding on the left and right sides of text inside #rightPage and #leftPage for a little breathing room.

Now we have this:

That's it! Next time we will finish up the the HTML and CSS.