Floating Columns of WellRounded Rectangles

In this tutorial we are going to go through the basics of building this sample, which uses WellRounded rects to make a three column page with a full header. We will be using the float CSS property to achieve this. If you aren't very familiar with CSS, we recommend going through the And End To Absolute Positioning tutorial, because we'll be using that technique extensively.

Do you understand floats?

Very often when positioning items (like images) in the flowing river of text that makes up a web page we run into problems because they act as if they are taking up 'a whole line'. Floating items are items that position themselves to the left or the right of the river of content, but don't block the content utterly. The CSS is simple: float: left;

Columns can be built easily using floats by simply designating a series of rectangular divs that float to the left. The first div lines up against the left edge of the browser window, the second div lines up against it, and so on.

When using floats we also might use a CSS property called clear. Clear can be set to left, right, both (as well as none and inherit). A clear of left means "go clear to the left edge of the browser."

When using floats for columns, you could use clear: both; for headers and columns that you don't want to stack to one side of the columns.

For more information about floats and clears, check out this very excellent discussion on Autistic Cuckoo

The Beginning

1. Make a new empty document in DreamWeaver. Save it someplace.
2. If you desire, set the document background color before proceeding.

The Header

3. Make a new WellRounded rect. You can use any settings you want, but be sure to use Fit To Content for the Height. You can ignore the width - it is unimportant. You can use any class name or div names you desire, but if you want to keep in synch with these examples, name the div myheader.
4. Find the CSS for the div of the new rect. It should look like so:
   
   #myheader {
position: absolute;
left: 64px;
top: 64px;
width: 300px;/* -- edit width here! -- */
padding: 0;
margin: 0;
}
5. Comment out the position, left, top settings. We comment things in CSS by surrounding them with /* and */. Note: do not include the 'edit width here' in your comment. It should now look like so:
   
   #myheader {
/*position: absolute;
left: 64px;
top: 64px; */
width: 300px;/* -- edit width here! -- */
padding: 0;
margin: 0;
}
6. Change the width attribute from 300px to 100% (width: 100%; )
7. Look at your rect in the design view. It should be at the top of the document, spanning the entire document.
8. We are going to add two settings, float: left; and clear: both; to the CSS of the DIV. Technically, we only need clear: both;, but as of this writing, DreamWeaver MX 2004 renders it a bit better if we make it a float as well. Your CSS for the header should be looking like so:
   
   #myheader {
/*position: absolute;
left: 64px;
top: 64px; */
width: 100%;/* -- edit width here! -- */
padding: 0;
margin: 0;
clear: both;
float: left;
}
9. We have a sample file that is this stage here: threecolumnsample_01.html

The First Column

10. The trickiest part of this next section is getting DreamWeaver to let you place the cursor 'outside' the content of the header. When you get tired of DreamWeaver thinking it's smarter than you, open up the Code View and place the cursor before the closing tag </body> (maybe add a few extra lines there).
11. Make a new WellRounded rect. Since you created a class for the header rect, you don't have to create a new class this time (though if you wish you can). Again, make sure the height is set to Fit To Content and we will name this column firstcolumn
12. Apply steps 4, 5, and 6 above to the firstcolumn div CSS. Except set the width to 33% instead of 100%. Your CSS should look like so:
    
    #firstcolumn {
/*position: absolute;
left: 64px;
top: 64px; */
width: 33%;/* -- edit width here! -- */
padding: 0;
margin: 0;
}
13. Finally, we add float: left; to this divs CSS. It should now look like this:
    
    #firstcolumn {
/*position: absolute;
left: 64px;
top: 64px; */
width: 33%;/* -- edit width here! -- */
padding: 0;
margin: 0;
float: left;
}
14. There is a sample file showing this stage here: threecolumnsample_02.html

The Second and Third Columns

15. Follow the exact same steps for the first column, except change the names of the divs (secondcolumn & thirdcolumn).
16. You should have something like this: threecolumnsample_03.html
17. Pretty easy eh? We are effectively done with the CSS part of this tutorial. But we are going to show one of the problems that plagues CSS designers everywhere as well as introduce a nice solution.

Making It Hard On Ourselves

If you haven't already, add some content to the columns. Notice how the WellRounded rectangles expand to accomodate whatever content you type in. Add some content such that the columns are different heights (like so: threecolumnsample_04.html).

Question: How can we make these columns the same height?

Answer #1: Use a fixed column height.

This solution isn't ideal, but it's easy. We'll borrow the CSS the WellRounded normally uses when making Absolute height rectangles.

1. In the <style> section of the <head> of the document add the following CSS:
   
   #firstcolumn .wr_contentrow .wr_content { height: 500px;}
#secondcolumn .wr_contentrow .wr_content { height: 500px;}
#thirdcolumn .wr_contentrow .wr_content { height: 500px;}
2. You should have something like this: threecolumnsample_fixed.html

Answer #2: Use javascript.

Perhaps not a perfect solution if your readers have javascript turned off, but it works well and it has the advantage of making the height of the columns sensitive to the effective height of the content.

Tag The Columns

In answer#1 above, we see that to change the height of a column, we didn't perform
#firstcolumn { height: 500px;} instead we did this:
#firstcolumn .wr_contentrow .wr_content{ height: 500px;} The height of a column is determined by the height of the content div.

To script the changes of the column heights we need to be able to uniquely identify each column. So do the following

1. For each column, find its wr_content div: <div class="wr_content"> it should be immediately before the actual content of the WellRounded rect.
2. Add a unique id attribute. We are adding the attributes "first", "second", and "third" to their respective columns: <div class="wr_content" id="first" >

Add The Script

We'll be adding a block of javascript to the <head> part of the document. There are two to choose from. The first one works on any WellRounded columns that all have the same class. The second is used when you have columns that use different WellRounded classes.

3. Select the correct script above, move it to your site folder and add the correct link to it in the <head> section of your document.
   <script type="text/javascript" src="regularizeColumns.js"></script>

Call The Script

Both scripts use the same central idea. We call the script with the names of all the columns we want regularized. The very first name we pass in should be the name of the tallest column. We'll need to call this script when the document loads, as well as whenever it is resized.

1. Find the opening <body> tag in your document.
2. Add the script calls, like so :
   <body onload="regularizeColumns('third', 'second', 'first');" onresize="regularizeColumns('third', 'second', 'first');" >
3. Done! Test it Out! Here is our final version: threecolumnsample_js.html

If you used different WellRounded classes for your columns, then you'll need the following script calls instead:
<body onload="regularizeWRColumns('third', 30, 'second', 25, 'first', 20);" onresize="regularizeWRColumns('third', 30, 'second', 25, 'first', 20);" >
The numbers (30, 25, 20) are the height of the corner pieces for those respective classes. This number is also the height of the classes wr_toprow div. The third sample from the main WellRounded page uses this second script.

Experimentation

• Try adding margins to your columns. I suggest using percentage based margins, and making sure the margins and the widths of the columns total to 99%. For example, lower the column widths to 31% and set the left and right margins of the middle column to 3%.
• Can you figure out how to add a footer? (It's trivially easy).