We are removing all width settings of 774px from our styles right now since we need the window to change as the browser changes width sizes. We are also going to change from the method of floats that we have been using and go with an absolute positioned page.

The side columns are going to be absolutly positioned. Using this method we can make our content come first in the markup and since the sides columns are absolutly positioned we can place them wherever we wish for them to be.

Using this method is also good for screen readers or no-mouse navigation devices to step through your pages markup. The content will be the first thing to be read. This is also good for search engines. They tend to rank your content that is placed at the top of your markup.

So, this layout uses absolute/relative positioning to position the side columns within their respective faux columns containers.

You can control the maximum and minimum widths of the fluid center area. Once the layout reaches its maximum widht, it centers iteslf in the browser as the window gets wider.

When you view the source on this page, you will see that column2 comes before columns 1 and 3 now.

As you can see, as I type in more content in the center section, the sides extend down even with the center column.

• Link 1
• Link 2
• Link 3

This template uses floats with the Aslett clearing method

What we have learned so far is that we need to zero out the padding, margin and borders, by using the global selector *.

Also, to add margins to the elements, rather than add padding to their containers, to avoid box model differences in old versions of IE Win.