Boxing Everything

In our previous lesson, we made a single column and used "margin:" to postion the content. This has its limits and lacks the flexibility of a page that's fully laid out using CSS-P.

In this tutorial we'll be making this basic three column layout page. It's a pretty standard layout. Two outside columns with a bigger "main content" column in the middle. There's some space between the boxes, and between the outside boxes and the edge of the screen. You can put any content into these boxes - even nested child boxes.

The advantages of these boxes over a three-column table are many. First, you can color the borders individually. It's much easier to style the content (fonts, etc.).

It's also much more effecient. Table code would have to be placed on every page. CSS Positioning and styling can be put on a single external stylesheet and linked to each page. With a complex layout, this can dramatically reduce the size of your page files and loading times. Finally, using an external stylesheet allows you to make changes over the whole site by editing only the stylesheet - not each individual page.

Making Width & Left Calculations

The first rule of using CSS-P to layout a whole page is to put all content in <div>s. You don't have to put the whitespace between the boxes in <div>s, but all content must be placed in a box. Always code your layout before you add your content. This makes debugging and adjusting the layout a breeze.

As you gain experience, you can jump right into coding these layouts, but to start out, calculate your dimensions and positions first. The only major components of this style of CSS-P layout are the "width:" and "left:" properties. That's all we use. No complex margins or anything.

Begin making the example by drawing it out on paper. This is how you should always begin a page's layout - with pen and paper. Draw out the boxes and any spaces between them. Roughly draw their relative widths and positions just enough so you know which boxes are bigger than others and where more or less whitespace is needed.

Next, you have to make some simple calculations. This is a relatively laid out page. We'll be using percentage values for the width of the boxes ("width:") and their horizontal positioning ("left:").

Don't get scared. All you have to know is that the page is 100% across - duh - and how to add. Begin by making an estimate of how wide you want your main content box. I originally wanted mine to have a width of 50% of the page.

Next, guess at how much whitespace you want between the boxes in a general sense. A lot or a little. An average amount of whitespace, all totalled, is around 20% of the width of the page. That's what I decided on.

Knowing that I want the main box to be 50% wide and have a total of 20% whitespace, I know I have used 70% of the page's width. That only leaves me 30% for the remaining boxes. That's an average of 15% each. Too small for my tastes - and, remember, this is just a matter of taste. You size your boxes like you want to.

I decided to lower my main boxes width to 40% and keep the 20% of total whitespace. This left me 40% for my other two boxes which I divided evenly - 20% each. That's better.

Now I know I've got 80% of my page's width in boxes and 20% in whitespace. Great. That adds up to 100%. If you go over 100%, the viewer will have to sidescroll regardless of the resolution they are using. Make sure your widths, including whitespace, add up to 100% and no more.

The last thing I have to calculate is how to divide the whitespace. Note that you don't actually code the whitespace. You just use the calculations to position your boxes leaving the whitespace.

I've got 20% of the page to use as whitespace, and I don't want big gaps on the outside. Just enough to take the boxes off of the edge of the screen. I'll give each outside edge (the far left and right) 2% whitespace each. That's a total of 4%. I still have 16% of the page for whitespace between the boxes. There are two gaps between the three boxes. I'll split the space evenly to make two 8% gaps between the main box and the outside boxes.

From left to right, my page's percentages will be:

2% whitespace on the far left - running total = 2%.

20% width of the first box - running total = 22% - box plus first whitespace.

8% whitespace - running total = 30%.

40% main box width - running total = 70%.

8% whitespace - running total = 78%.

20% right box - running total = 98%.

2% far right whitespace - running total = 100%.

Perfect! Of course you can add as many boxes and as much whitespace as you need. Just remember that it has to add up to 100% and no more. And, just like with tabular formatting, too many boxes crowd the page. The screen is only so wide.

Coding The Layout

With your percentages calculated, you're ready to code. Begin with a basic page with three <div> boxes. Here's the code for the boxes in the example:

<body>

<div id="leftbox">
</div>

<div id="centerbox">
</div>

<div id="rightbox">
</div>

</body>

Now we're ready to style the boxes. This is what's in the <style> section of the example's <head>. Generally, external stylesheets are used. I keep the styling in the head of my examples so it's easier to find when you are viewing the source code. Lets begin with "leftbox".

#leftbox{
position: absolute;
top: 10px;
left: 2%;
width: 20%;
height: 500px;
border: solid 2px #0000ff;
}

You should recognize the above. I've given the box a "position:" value of "absolute". That will be shared by all of the boxes and is important. A value of "relative" would place the boxes below one another. We want them side-by-side.

I know it sounds odd - coding a relative page with "position: absolute;", but that's what works. The "position: relative;" declaration would be used for any sub-boxes nested inside our layout boxes, but that's for later.

The next line sets the top at 10 pixels. This, too, is used on all boxes to bring them all up to the same level.

The "left:" line is imporant. When laying out a page with CSS-P, "left:" and "width:" are the primary concerns because they determine the horizontal dimensions of the page. That's what we spent so much time calculating. Remember that we wanted 2% whitespace on the outside of the page. Well, that's where the 2% value for this "left:" comes from. The first box will be placed 2% (of the page's total width) inside the page.

The "width:" value is what we determined in our calculations. Twenty percent. The rest of the code should be familiar to you. I had to add a "height:" because I don't have any content coded in the boxes and they barely show up without either content or a height value. Good layout debugging tip - borders and "height:"

Also note that I coded a border to define the box. For reasons that will become very clear in the next lesson, it's better to use borders as opposed to a background color to visualize the box. Overlapping is easier to detect. It's also important to note that a border is included in a box's "width:". It does not add to the "width:" value. That makes life a lot easier.

The style for the second box is exactly like the above box with two differences. It has a width of 40% and its "left:" value must include the 2% initial whitespace, the 20% first box width, and the 8% whitespace between the first and second box - that's a total of 30% for "left:". Figure out your "left:"s ahead of time.

#centerbox{
position: absolute;
top: 10px;
left: 30%;
width: 40%;
height: 500px;
border: solid 2px #ff0000;
}

See how the "left:" is calculated? It's 2% + 20% + 8% = 30%. That's why it's good to draw out the page on paper and calculate your initial values beforehand. It makes the coding go a lot quicker.

It's pretty easy to figure out "left:". Just add up all of the values preceding the left edge of the box you're coding. Our last box will have to be placed past the main box and some whitespace. From the left of the page that's: 2% + 20% + 8% + 40% + 8% = 78%. The 40% is the width of the central box and the 8% at the end is the space between the second and third box. Here's the CSS for the third box.

#rightbox{
position: absolute;
top: 10px;
left: 78%;
width: 20%;
height: 500px;
border: solid 2px #00ff00;
}

The above places our last box 78% across the page and gives it a width of 20%. This adds up to 98% and leaves us a 2% gap between the right box and the edge of the screen. Just as we planned!

Summary & Exercises

Despite all of the bunk you hear about the complexities of CSS layout, it's really pretty simple if you keep it simple. Use only "width:" and "left:" and you can make any column configuration imaginable.

Always draw a sketch of your page's layout on paper before you start coding. Roughly approximate the relative size of boxes and the amount of whitespace desired.

Use the sketch made above to begin making specific calculations. Follow this procedure (select and copy this wisdom):

1) Set a value for your main content box.

2) Balance the remaining space between the remaining boxes and whitespace. The amount of whitespace depends on if you want an "open" or "crowded" look. Whitespace almost never exceeds 30% of the page's total width.

3) Set the width values for your remaining boxes.

4) Set the values for each individual instance of whitespace from left to right. Keep in mind that in most cases, the space between boxes is equal. A little division may be needed.

5) Calculate the "left:" value for each box taking into consideration both the width of preceding boxes and whitespace.

When initially styling your boxes, give them a height and a border to make them easily visible. Use borders as opposed to a background color so that overlapping borders become apparent.

Make a five column page with all of the columns evenly sized and spaced with the same small amount of whitespace between them. Now, make the "width:"s and "left:"s total more than 100%. Note the sidescrolling required at all resolutions. Sometimes this is necessary if a particularly wide image or other fixed-width content is on the page. There are workarounds.

To Next Advanced CSS Lesson

Back To Advanced CSS Index