Article : From Photoshop to Drupal 6 Theme - Step by Step Part III

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:
#columnContainer {
width: 791px;
float: left;
background: url(../images/bgContainerColumns.png) left top repeat-y;
}

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:

| Read More..

Courtesy: -geoffhankerson.com