shadowline
Tables Vs. CSS positioned DIVs
Some people are talking about using DIV and CSS to create layouts instead of tables or iframes. What is that all about?

Welcome to the new age of designing a web page. This is really nothing new, but rather a different way of doing things. Some pages you see around the internet do not contain any tables at all. Each section is a DIV area being positioned by CSS.

For many years, people have been using a TABLE or nested tables to create a desired layout. That is designing and putting content into specific spots or areas. FRAMES and IFRAMES appeared and they expanded the creative abilities for web page designers. Now it is time to go onto the next evolutionary step... CSS positioning and DIV areas.

The first step to take is to separate the two major factors in a web page. Layout and Content (also known as tabular data). Layout is the act of placing an object in a specific place. Content is all the stuff being shown on your webpage.

Easy so far? Good. You don't have to go overboard and kill all of your tables. Just the ones you are using to create a layout effect. Tables are still great tools when it comes to showing a set of values in that type of layout. Basically though, tables are supposed to be used for organizing data, not for the entire content of a webpage.

So now what? You have a bunch of content stuff just laying around in a jumble. Some navigation area, some title or logo, some information data...

Start by creating a DIV area. The DIV is a block level container. It will hold a specific batch of your stuff. Lets put some navigation links into this first one.

<div id="navigation">
<a href="page1.html"> Link 1 </a> <br />
<a href="page2.html"> Link 2 </a> <br />
<a href="page3.html"> Link 3 </a>
</div>

This DIV should be placed within the BODY section of your page coding, like any other normal coding. The DIV is a container, similar to the P (Paragraph) container. We put some links into this one for now. The important part to note in the above coding is the ID property. We will use that value to place this block onto the webpage and decorate it as desired.

The next step is to apply a bit of CSS to this DIV. Remember that ID property? The follwing coding will be placed within the HEAD section of your page coding.

<style type="text/css">
#navigation {
}
</style>

Tables were used to place things into specific spots. CSS positioning will help with that now. Link to CSS Positioning Page.

<style type="text/css">
#navigation {
position: absolute; left: 50px; top: 100px;
}
</style>

click to see example in action

OK, so you have that stuff positioned 50 pixels from the left and 100 pixels from the top. How about adding some real styling to that area? Well, if you've read over our CSS section, you probably have a great knowledge on how to do this already. For examples sake though, lets do a bit here...

<style type="text/css">
#navigation {
position: absolute; left: 50px; top: 100px;
border : dashed 1px #000000;
background : #c0c0c0;
padding : 4px;
}
</style>

click to see example in action

Now that was a bit more impressive. You can apply whatever other css styles you want to that container. After you're done, create another DIV area and plunk in your next batch of coding like a title bar area or the main contents part.

To learn about creating a scrolling DIV area, click on the HOW DO YOU navigation or click here... Scrolling Divs

One lingering question you may have is why we used ID instead of CLASS to create this effect. Essentially, the class property can be used instead of id. The id property is used in cases when the effect will be applied only once to an object. The class property is used when the effect will be applied to many objects or areas.

In the case of a layout, you will be applying a specific position and style to only one specific div, otherwise you will have a total overlap. You will use a new ID value for your second DIV area, another new ID value for your third DIV area and so forth...

In the case of content being shown, a CLASS would be more appropriate. Have a look at our example coding spots. There are usually more than one of those types on each page. ID would be overloaded since there is more than one instance. CLASS is used to describe the example styles and may easily be used more than once per page coding.

Our site currently uses some tables mixed with css and divs. At this stage of the browser game, it is hard to get a positioned, fluid layout to look the same in IE, Mozilla, and Opera, so some compromises have to be made for now.
Tables Vs. CSS positioned DIVs
shadow

Advertise in the banner along the top, Click here!

Valid XHTML 1.0 Transitional Valid CSS! Text Link Ads
shadow
shadow