Home arrow Style Sheets arrow Page 2 - DIV Based Layout with CSS

DIV Based Layout with CSS

Most Web page designers use a table-based layout to achieve a coherent and consistent look. There's a different way to achieve the same look. Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance--all while making your website more appealing to search engine spiders. Alejandro Gervasio explains how it's done, with copious examples.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 794
December 21, 2004
  1. · DIV Based Layout with CSS
  2. · The table-based approach
  3. · The mighty DIV tag
  4. · Fixed layout design with fixed boxes
  5. · Three-column fixed layout
  6. · Fixed layout design with floating boxes
  7. · Adding a right column
  8. · Liquid design with floating boxes
  9. · Three-column liquid layout with floating boxes

print this article

DIV Based Layout with CSS - The table-based approach
(Page 2 of 9 )

One of the most common page layouts using tables is easy to do with the ALIGN attribute. This is a left-hand navigation bar with a larger content section, directly to the right of it, building only two tables.  

Here is the code:

<table align=”left” width=”20%” height=”100%”>
<td valign=”top”>Navigation links are placed here</td>

<table align=”right” width=”80%” height=”100%”>
<td valign=”top”>Main content is placed here</td>

We build this simple two-column layout, placing the tables as mentioned above: one is located to the left and the other is located to the right. The ALIGN attribute helps us to turn complex tables into simpler ones.

We can use this technique with nested tables too, to keep our layout easier to maintain and display, while it’s still quite appealing to search engines spiders.

A note about this: the attributes ALIGN, WIDTH and HEIGHT are deprecated elements in HTML 4.01 (they are marked for deletion in future versions), but they aren’t likely to disappear any time soon. Currently, all browsers recognize these attributes.

From this point on, we could attach an external style sheet that contains all the proper style declarations for each table, continuing to improve the code like this:

<table id=”content” width=”80%” align=”right” height=”100%”>
<td valign=”top”>Main content is placed here</td>

<table id=”leftnavigation” width=”20%” height=”100%”>
<td valign=”top”>Navigation Links are placed here</td>

The layout is the same as before, but note the ID attribute for each table. Assigning ID contextual selectors from an external style sheet allow us to build the visual appearance for data contained into each table.

So far, this is a simple sample for table-based layout. It can be easily expanded to more complex layouts, adding nested tables techniques and so. However, I would strongly recommend using DIV tags and CSS for page layout, as we shall see in a moment. Trust me.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials