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

  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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:
target_layout.gif

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.

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>My Website</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
 
  <body>
  </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3.   <head>
  4.     <title>My Website</title>
  5.     <link rel="stylesheet" type="text/css" href="style.css" />
  6.   </head>
  7.  
  8.   <body>
  9.   </body>
  10. </html>


Creating the Containers in the Markup

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.

Code: [ Select ]
<body>
  <div id="page_container"></div>
</body>
  1. <body>
  2.   <div id="page_container"></div>
  3. </body>


Now, within our "page_container", we'll add containers for the specific content areas that we mentioned before. Again, we'll identify each uniquely.
Code: [ Select ]
<body>
  <div id="page_container">
    <div id="header"></div>
    <div id="left_column"></div>
    <div id="center_column"></div>
    <div id="right_column"></div>
    <div id="footer"></div>

  </div>
</body>
  1. <body>
  2.   <div id="page_container">
  3.     <div id="header"></div>
  4.     <div id="left_column"></div>
  5.     <div id="center_column"></div>
  6.     <div id="right_column"></div>
  7.     <div id="footer"></div>
  8.   </div>
  9. </body>


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.

Code: [ Select ]
<body>
<div id="page_container">
    <div id="header">
        <h1>My Web Site</h1>
    </div>
    <div id="left_column">
        <ul>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
            <li><a href="#">Menu 3</a></li>
        </ul>

    </div>
    <div id="center_column">
        <h2>My Document</h2>
        <p>Vivamus elementum ligula gravida neque. Cras adipiscing ligula non turpis. Sed cursus scelerisque libero. Sed at arcu. Vestibulum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus id turpis. Sed purus. Integer eget ligula elementum felis aliquet rhoncus. Morbi augue.</p>

    </div>
    <div id="right_column">
        <h3>Sidebar</h3>
        <p>Vivamus non urna eget nisi placerat vehicula. Vivamus semper molestie lacus. Proin a tellus et massa placerat ultricies. Curabitur viverra convallis felis.</p>

    </div>
    <div id="footer">
        <p>Copyright Information</p>
    </div>
</div>
</body>
  1. <body>
  2. <div id="page_container">
  3.     <div id="header">
  4.         <h1>My Web Site</h1>
  5.     </div>
  6.     <div id="left_column">
  7.         <ul>
  8.             <li><a href="#">Menu 1</a></li>
  9.             <li><a href="#">Menu 2</a></li>
  10.             <li><a href="#">Menu 3</a></li>
  11.         </ul>
  12.     </div>
  13.     <div id="center_column">
  14.         <h2>My Document</h2>
  15.         <p>Vivamus elementum ligula gravida neque. Cras adipiscing ligula non turpis. Sed cursus scelerisque libero. Sed at arcu. Vestibulum metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus id turpis. Sed purus. Integer eget ligula elementum felis aliquet rhoncus. Morbi augue.</p>
  16.     </div>
  17.     <div id="right_column">
  18.         <h3>Sidebar</h3>
  19.         <p>Vivamus non urna eget nisi placerat vehicula. Vivamus semper molestie lacus. Proin a tellus et massa placerat ultricies. Curabitur viverra convallis felis.</p>
  20.     </div>
  21.     <div id="footer">
  22.         <p>Copyright Information</p>
  23.     </div>
  24. </div>
  25. </body>


Our markup is now complete.

Adding Basic Styles

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.

Code: [ Select ]
/* Intrinsic HTML Elements */
body{margin:0;padding:0;}
div{margin:0;padding:0;}
h1{margin:0;padding:0;}
h2{margin:0;padding:0;}
h3{margin:0;padding:0;}
p{margin:0;padding:0;}
ul{margin:0;padding:0;}
li{list-style-type:none;}
 
/* Uniquely Identified Containers */
#page_container{}
#header{background:#999;}
#left_column{background:#CCC;}
#center_column{background:#ECECEC;}
#right_column{background:#CCC;}
#footer{background:#999;}
  1. /* Intrinsic HTML Elements */
  2. body{margin:0;padding:0;}
  3. div{margin:0;padding:0;}
  4. h1{margin:0;padding:0;}
  5. h2{margin:0;padding:0;}
  6. h3{margin:0;padding:0;}
  7. p{margin:0;padding:0;}
  8. ul{margin:0;padding:0;}
  9. li{list-style-type:none;}
  10.  
  11. /* Uniquely Identified Containers */
  12. #page_container{}
  13. #header{background:#999;}
  14. #left_column{background:#CCC;}
  15. #center_column{background:#ECECEC;}
  16. #right_column{background:#CCC;}
  17. #footer{background:#999;}


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:
target_layout_02.gif

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.

Code: [ Select ]
#page_container{width:760px;margin:0 auto;}


Now we get into the crux of creating a "float" scheme. For each <div> that we are going to use as a column, we'll add two definitions in our CSS, a width and a float.

Notice that the sum of the widths of these three elements is equal to the width of the #page_container element.

Code: [ Select ]
#left_column{width:180px;float:left;background:#CCC;}
#center_column{width:400px;float:left;background:#ECECEC;}
#right_column{width:180px;float:left;background:#CCC;}
  1. #left_column{width:180px;float:left;background:#CCC;}
  2. #center_column{width:400px;float:left;background:#ECECEC;}
  3. #right_column{width:180px;float:left;background:#CCC;}


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".

Code: [ Select ]
#footer{clear:both;background:#999;}


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:
target_layout_04.gif

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.

Code: [ Select ]
h1, h2, h3, p{margin:0;padding:10px;}


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.

Go To Part 2

Please PM me with any suggestions for improving this tutorial.


Thanks!
dM
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • suzie
  • Guru
  • Guru
  • User avatar
  • Posts: 1134
  • Loc: England

Post 3+ Months Ago

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
  • Stella1
  • Born
  • Born
  • Stella1
  • Posts: 3

Post 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 align
and in html you can use div align tag for it
  • satya-prakash
  • Graduate
  • Graduate
  • User avatar
  • Posts: 134
  • Loc: Bangalore

Post 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
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 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
  • Graduate
  • User avatar
  • Posts: 134
  • Loc: Bangalore

Post 3+ Months Ago

I think that is related with bug is some browser.
  • Sara1
  • Born
  • Born
  • Sara1
  • Posts: 3

Post 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
  • Born
  • cuocthiseo01
  • Posts: 1

Post 3+ Months Ago

that's great post about layout, css with html
  • Gautam
  • Born
  • Born
  • Gautam
  • Posts: 2

Post 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
  • Born
  • sandeepraju
  • Posts: 1

Post 3+ Months Ago

for a begginer like me , its some thing great its helped a lot.. thanks..
  • kevin1969
  • Born
  • Born
  • kevin1969
  • Posts: 2

Post 3+ Months Ago

Hey, great tutorial very clear and simple, no complex code, 2 thumbs up.
  • Creator013
  • Newbie
  • Newbie
  • User avatar
  • Posts: 12
  • Loc: California

Post 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
  • Born
  • kaak
  • Posts: 1

Post 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...

fine tutorial...now to part two...

Post Information

  • Total Posts in this topic: 13 posts
  • Moderator: Tutorial Writers
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.