Layout with DIVs instead of Frames for HTML

Introduction
Search Engines do not work well with frames in web pages. However, frames offer a
good way to have large area layouts in a web page. There are popular layouts by frames.
In this article I show you how to achieve these popular layouts using DIV elements. If
you implement the knowledge from this article, search engines will work with your web
page without the problem posed by frames.

In case you do not know, a DIV element is a containing element. It can take almost all the
elements that the BODY element takes.

For each layout, I will give you the layout description and then the explanation with DIV
elements. I will give you the equivalent DIV code samples. To save time and space, I will
not give you the corresponding frame explanation and code samples.

You need basic knowledge in CSS and HTML in other to understand this article.

Note: If you cannot see the code or if you think anything is missing (broken link, image
absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest
problem you have about what you are reading.

The CSS Display property and the DIV
The DIV element is a block-level element. This means it has an intrinsic line break
element in front of it and after it. So by default, the DIV element will always occupy a
horizontal strip in the BODY element (from the left to the right edge of your web page).
Elements with such behavior are called block-level elements. You can change this
behavior.

If you put two small images consecutively in your code, they would fit in one horizontal
(relatively large) line of your web page. Elements like this are called inline elements.
This kind of element does not have an intrinsic line break element in front or after it.

You can change a DIV element from a block-level element to an inline element. You do
this using CSS. To achieve this, just add the following property and value to the
declaration block of the DIV's CSS rule or to the style attribute of the DIV element:

display:inline

If you do this to two or more consecutive small DIV elements in your code, the DIV
elements will all be on the same line. Note: elements on the same line do not have the
same height. The tallest element determines the height of the line.

Note: when you have elements in a line, in order to force the next element to the next
line, you need to add after the element you want for the first line, a line break element (in
your code). So, if you have inline DIV elements on one line, if the next element is an
inline DIV and you want it on the next line, you need a line break element at the end of
the first line.

In the examples below, I use DIV borders for demarcations. You do not necessarily have
to include DIV borders in your design.

The Widths of the DIV Elements
I advise you to give the width of the DIV elements in percentages (not pixels). The
percentage value is relative to the width of the client area of your web page (if the DIV
element is just inside your BODY element - everything being equal). In this way, you
can conveniently cover the width of the client area with DIV elements. In such a case, in
theory, the widths of the DIV elements should sum up to 100%. In practice, when you do
this, some browsers may not display all the elements on the same line. To solve this
problem, reduce the percentage widths of the DIV elements slightly, and test your result
with the major browsers before you publish. The resulting widths will sum up to slightly
less than 100%.

You need to also use the CSS float property to float a left DIV element to the left and a
right DIV element to the right. The code samples below illustrate this. The use of the
float CSS property is not logical, but if you do not do this, some browsers will not display
your DIVs inline (in one line).

We now look at the layouts.

Left Stripe and Content
In this layout, the web page consists of two vertical bands. The left band is narrow; it can
be used for links to other pages. The right band is wide and it has the main content of the
page. Try the following code to get a picture of this description:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Links can go
here.

The main
page content goes here.

There are two consecutive DIV elements that have been converted to inline elements (and
placed next to one another). Read the code, especially the style attributes to appreciate
what is going on.

Header and Content
In this layout, the web page consists of two horizontal bands. The top band is narrow; it is
used for the title of the page, logo and/or banner. The lower band takes the rest of the
page; it has the content of the page. Try the following code to get a picture of this
description:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Title, logo or banner goes here.

The main page content goes here.

There are two DIV elements. The float and display properties have not been used here;
they are not needed. The DIV elements have their block-level default characteristics.

Left Stripe, Header and Content
This layout is a combination of the above two cases with the particularity that the top
band goes from the left edge to the right edge of the client area. Try the following code to
get a picture of this description:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Title, logo or banner goes here.

Links can go
here.

The main
page content goes here.

There are three DIV elements. The first is the default block-level DIV. It has a 100%
width. Since it has an intrinsic line break element after it, it forces any element after it to
the next line. The two DIV elements after, are inline elements having the float property.
Read through the code paying particular attention to the style attributes.

Left Stripe, Header, Footer and Content
This layout is similar to the above, but with an additional narrow horizontal band at the
bottom, for Footer. Try the following code to get a picture of this description:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Title, logo or banner goes here.

Links can go
here.

The main
page content goes here.

The footer goes here.

There are four DIV elements. The first three, you already know. That last one comes at
the end, with the default block-level characteristics. It does not need the display and float
properties. It has an intrinsic line break element in front of it. So it forces itself to the next
line, (out from the previous inline elements).

Other layouts
If you want a layout, which, is not mentioned above, then know that I have given you
plenty of information you can use for your special design.

The story continues (see below).

Height of the DIV Elements
You might have noticed that I did not include the height of the DIV elements above. This
was intentional. As you are designing a web page, you may not know how long a layout
DIV container would go downward. Also, the content (height) of some web pages change
with time (requests from the owner). So, avoid giving heights to layout DIV elements.

Scroll Bars
Hey, you can give these DIV elements vertical and horizontal scroll bars. Try the
following code first:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Title, logo or banner goes here.

The main page content goes