Layout with DIVs Instead of Frames for HTML

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:

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:

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:

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:

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:

Title, logo or banner goes here.

Links can go here.

The main page content goes
here.

This code is similar to the last but one above; however, the inline DIVs now have scroll bars. To give an element the two scroll bars, add the following CSS property and value to its style attribute or to the CSS declaration block of the DIV's rule in the style sheet.

overflow:scroll

Main Scroll Bars
The web page by default has scroll bars. These scroll bars are actually the scroll bars of the BODY element (just as we have given the scroll bars for the DIV elements). If your DIV elements have scroll bars, you might not need the main scroll bars of the web page. To remove these scroll bars, add the following CSS property and value to the style attribute of the BODY element or to the declaration block of the CSS rule of the BODY element in the style sheet:

overflow:hidden

Note: To give scroll bars to a containing element, give the value, scroll, to the elements CSS overflow property. If you do not want the scroll bars, give the value, hidden, to the property. The default value for the BODY element, not normally typed is, scroll.

Margin, Border and Padding of the BODY Element
If you remove the BODY elements' scroll bars as mention above, you would realize that the vertical scroll bar of the DIV having the main content would not be aligned to the edges of the client area. This is because of the padding, border and margin of the BODY element. They can be removed. The outermost rectangle of any containing element is the margin. Immediately inside this narrow rectangular is the border of the element. Immediately inside this border is the padding narrow rectangle.

To remove the margin, border and padding of the BODY element, include the following in the style attribute of the BODY element or to the declaration block of the CSS rule of the BODY element.

margin:0px; border:0px; padding:0px

Try the following code and compare the results with those of the previous code:

Title, logo or banner goes here.

Links can go here.

The main page content goes
here.

Life Example
May be you want an example of a web site with DIV partitions that is life: This is a good example: http://www.cool-mathematics.com

Summary
To have a major web page layout with the DIV elements,
- Use several DIV elements.
- Use the CSS display property of the DIV elements, accordingly.
- If you need the vertical and horizontal scroll bars, use the CSS overflow property.
- You may have to use the float property to make certain browsers respect the display property you have given.
- You may also have to use the line break element to force an inline DIV element to the next line.
- Test your result with major browsers and make any adjustments necessary.