TUTORIAL: Multi-Column Layout Using CSS Float - Part 1

This is an intermediate level tutorial that discusses one method of multi-column page layout. It assumes the reader has a good knowledge and understanding of HTML and CSS.

Introduction

Once upon a time, web developers used the HTML element <table> to layout content columns. This practice is now recognized as cumbersome and not very semantic.

These days, instead of using <table>, we use the <div> element as a container for content. Once you get the hang of it, using <div> becomes very liberating and greatly reduces the amount of markup needed to layout a page.

Basic Page Structure

For this tutorial, we're targeting a layout that has three columns of content with spaces at the top and bottom for a header and footer. The page will be a fixed width and will also be centered in the browser's display area (Figure 1).

Attachments:

Figure 1 - The intended design.

We'll begin with an XHTML page structure in its most simple form. In the <head> of our document, we'll point to an external CSS file.

The first <div> we're going to create within the <body> of this page will contain the entire content area. This allows us to position our layout within the display area wherever we want. We'll give this, and all containers, a unique identity using the "id" attribute of the <div> element.

At this point, if we were to render this document, we would not be able to see anything. Let's add some dummy content so that we can see what's happening. We'll use a typical scheme for structuring information including titles, sub-titles, paragraphs and a menu.

Let's create a basic set of selectors and definitions in our CSS file for the intrinsic HTML elements and for each of the containers. We want to remove the inherent margining and padding from all elements, remove the bullets from the <ul> that we're using for our menu, and allow for some simple background colors in our content areas for visual clarity.

With the HTML and CSS in place, our page should render as shown in Figure 2. Notice that our document makes sense "semantically", similar to a document printed on paper. The web site has a title, there is a menu/table-of-contents for the site, the page we're viewing within the site has a title, and there is a clear heirarchy/structure for ancillary and tertiary information. The structure of this arrangement should always be based on the needs of the site and/or page that's being created.

Attachments:

Figure 2 - Semantic markup with minimal styling. (Firefox 2.0.0.12)

Adding More Styles - Widths, Floats, and Clear

First, let's define a width and position for our layout by adding definitions to our #page_container selector in our CSS file. Again, nesting all the content in this overall container allows us a great deal of flexibility.

When we added these definitions, we altered the postions and widths of the columnar elements in the render flow. To return to the normal render flow within the parent container, we'll need to "clear" the next element from the effects of the "float".

Our three columns now line up from left to right and the longest column, in this case the right_column, pushes the footer down the page, within the parent container (Figure 3).

Attachments:

Figure 3 - The final render of the float scheme with minimal styling. (Firefox 2.0.0.12)

That's it! That's how it works. This method will work in all current browsers and should render more or less identically.

Conclusion

Now that we've arranged a system of containers, we're free to start inserting data and fleshing out our styles. We might begin this process by adding some negative space around our textual elements. Because we're relying on a style sheet to define our visual presentation, we can easily achieve this effect by simplifying some of our definitions for intrinsic HTML elements while adding a bit of padding.

One of the first things we notice is that the columns are not all equal in length and therefore there are gaps below the shorter ones. In a real world application of this technique, this visual problem can be overcome easily.

Its late now but I am in a 'bored mood' with my other things so tomoz I will be back to see what I can achieve in DW8 along with this tut.

Many thanks DM

Stella1

Born

Posts: 3

3+ Months Ago

suzie wrote:

OH DM,

FAB, some tutorials for web design.

Right and left column is navigation and a sidebar or two navigations?

Its late now but I am in a 'bored mood' with my other things so tomoz I will be back to see what I can achieve in DW8 along with this tut.

Many thanks DM

You can use padding tag for left or right alignand in html you can use div align tag for it

satya-prakash

Graduate

Posts: 134

Loc: Bangalore

3+ Months Ago

Nice!At many places, for similar template, I saw they also used left margin for columns. Like #center_column{left-margin:182px;}#right_column{left-margin:585px;}

digitalMedia

a.k.a. dM

Posts: 5146

Loc: SC-USA

3+ Months Ago

satya-prakash wrote:

Nice!At many places, for similar template, I saw they also used left margin for columns. Like #center_column{left-margin:182px;}#right_column{left-margin:585px;}

Yes, I've seen that as well. However, I've found it unreliable and not in keeping with the intended use of margins.

There are, of course, many ways to skin the proverbial cat.

satya-prakash

Graduate

Posts: 134

Loc: Bangalore

3+ Months Ago

I think that is related with bug is some browser.

Sara1

Born

Posts: 3

3+ Months Ago

Hello, Thanks Thanks Thanks for your great info and i liked your post. The way of your teaching is mind blowing. In this post you describe each and every step which is very useful for everyone.

Thanks once again.

cuocthiseo01

Born

Posts: 1

3+ Months Ago

that's great post about layout, css with html

Gautam

Born

Posts: 2

3+ Months Ago

Nice tutorial.. Want to add a point to this.

We may also change the width of the all the container divs and divide them in percentages. That would convert this layout from fixed layout to fluid layout.

sandeepraju

Born

Posts: 1

3+ Months Ago

for a begginer like me , its some thing great its helped a lot.. thanks..

kevin1969

Born

Posts: 2

3+ Months Ago

Hey, great tutorial very clear and simple, no complex code, 2 thumbs up.

Creator013

Newbie

Posts: 12

Loc: California

3+ Months Ago

I love this tutorial. I've been trying to figure out how to build the Troop page without using a table and nothing looks right (even when I use tables). I'll be trying this out as soon as I get home from work.

THANK YOU!!!

kaak

Born

Posts: 1

3+ Months Ago

This is one technique...I know floats well, but i never managed to get it right...guess needs more experience...things worked well here and it was very simple to follow problem is there this is a fixed layout even the page container has a fixed width...