Introduction

Historic DIV support

The separation of content (data) from display (style) has long been the intent of professional writers [Ref:9 & Ref:12], and has been encouraged by the design and use of SGML standards [Ref:10] as far back as the origin of the world wide web [Ref:11].

In HTML terms, the Division (DIV) tag provided the functionality of "page alignment for block structuring elements" and was originally introduced by the W3C in 1995 for HTML version 3.0 [Ref:1]. Historically, the major web browsers have respectively supported DIV tags ever since its introduction, with Microsoft Internet Explorer (IE) from version 3.2 (1996) [Ref:2], Netscape Navigator (NN) from version 2.0 (1996) [Ref:3], and Opera from version 2.1 (1996) [Ref:4].

So, the DIV tag is not new, although additional functionality has been added to subsequent W3C HTML specifications over time since then. The browsers have been updated to support different aspects over time too [Ref:5]. It is now possible to completely position the display of DIVs anywhere on the page using only CSS, which is mostly supported by all the major browsers. (See Browser Versions – Lotech Solutions.)

Historic TABLE usage

The horizontal positioning of block elements was the sole realm of TABLEs (also introduced in HTML 3.0) and the 'align=center' attribute, until this millenium.

TABLEs are still practical and useful for displaying tabular data content like spreadsheets and database records, etc, however, have now lost the right to control block element positioning in HTML and the next generation of XHTML. As the WC3 says, the use of TABLEs for HTML element page positioning is deprecated (outdated by newer constructs [Ref:14]) in favor of the use of CSS for HTML element page positioning [Ref:6].

Historic Browser usage

Many popular web sites have migrated to using XHTML and CSS standards, separating content from style (data from display/layout/presentation) [Ref:7]. The outdated argument that older browsers can't view modern standards compliant web pages hasn't stood the test of time; browsers are updated for this purpose [Ref:8].

Where to from here?

The remainder of this article describes how to position DIVs anywhere on the page using only CSS.

Preparation

If you haven't already done so, you should read the [what?]

Requirements

This article expects that you already have some HTML source code knowledge or web development experience, and that you are interested in migrating your website towards modern standards compliant HTML and CSS.

The gist of the matter

("gist" - noun - The most essential part; the main idea or substance [Ref:15]).

The key to the successful positioning of DIV blocks on an HTML page is to have an understanding of the elements involved and their positioning properties.

The DIV tag is an HTML block element, which can be set to be positioned in the HTML stream flow (position="relative"), or outside of the flow (position="absolute").

The DIV tag can be floated left (float="left") or right (float="right") to allow for the positioning of DIV elements side by side horizontally.

The combined use of positioning and floating properties determines the final layout of the DIV elements in the rendered HTML display.

Examples

To divide an HTML page vertically into three sections, (1) a header, (2) the content, and (3) a footer, you need only create three DIV tags, and position them relatively:

<—! place this in the HTML Body section —>
<div id="DivHeader" style="position:relative">Header</div>
<div id="DivContent" style="position:relative">Content</div>
<div id="DivFooter" style="position:relative">Footer</div>

See Example 1.

Alternatively, you could separate the inline style attributes and eliminate style declaration repetition by making the common style rule declaration, then applying the style to each DIV element through classing.

<—! place this in the HTML Head section —>
<style type="text/css">
.PosRel {position: relative;} 
</style>

<—! replace this in the HTML Body section —>
<div id="DivHeader" class="PosRel">Header Header Header</div>
<div id="DivContent" class="PosRel">Content Content Content</div>
<div id="DivFooter" class="PosRel">Footer Footer Footer</div>

DIVs without any borders or colouring are invisible, so to see how these DIVs fit together, for the purposes of this exercise, add the following borders and colouring to the style declarations:

<—! add this to the HTML Head section —>
<style type="text/css">
.BorderSolid1px {border-width: 1px; border-style: solid;} 
.BorderBlue {border-color: blue;} 
.BorderGreen {border-color: green;} 
.BorderRed {border-color: red;} 
.BkGrndBluePale {background-color: #D0D0FF;}
.BkGrndGreenPale {background-color: #C0FFC0;}
.BkGrndRedPale {background-color: #FFCCCC;}
</style>

Apply these style classes to the DIVs, so that they become readily visible:

<—! replace this in the HTML Body section —>
<div id="DivHeader" class="PosRel BorderSolid1px BorderBlue 
 BkGrndBluePale">Header Header Header</div>

<div id="DivContent" class="PosRel BorderSolid1px BorderRed 
 BkGrndRedPale">Content Content Content</div>

<div id="DivFooter" class="PosRel BorderSolid1px BorderGreen 
 BkGrndGreenPale">Footer Footer Footer</div>

See Example 2.

To have two DIVs display side-by-side, insert a Sidebar DIV before the Content DIV, set one to float to the left, and the other to float to the right, and declare more colour border and background styles to identify the Sidebar DIV: 

<—! add this to the HTML Head section —>
<style type="text/css">
.FloatLeft {float: left;} 
.FloatRight {float: right;} 
.BorderFuchsia {border-color: fuchsia;} 
.BkGrndFuchsiaPale {background-color: #FFD0FF;}
</style>

<—! add this to the HTML Body section —>
<div id="DivSidebar" class="PosRel FloatRight BorderSolid1px
 BorderFuchsia BkGrndFuchsiaPale">Sidebar Sidebar Sidebar</div>

See Example 3.

To position another element absolutely, like an overbar (positioned over the other DIVs), create an absolute position style rule and apply it to another DIV:

<—! add this to the HTML Head section —>
<style type="text/css">
.PosAbs {position: absolute;} 
</style>

<—! add this to the HTML Body section —>
<div id="DivOver" class="PosAbs">Over Over Over</div>

The next step to absolute positioning is to declare the size (width and height) and the coordinates for the top and left properties of the absolutely positioned DIV:

<—! add this to the HTML Head section —>
<style type="text/css">
.Width150px {width: 150px;} 
.Height150px {height: 150px;} 
.Pos150pxTopLeft {top: 150px; left: 150px;} 
</style>

<—! replace this in the HTML Body section —>
<div id="DivOver" class="PosAbs Width150px Height150px Pos150pxTopLeft">
Over Over Over</div>

That will create a positioned overbar DIV block 150 pixels square, with the top left corner of the DIV positioned exactly 150 pixels from the top and left edges of the page. To absolutely size and position it anywhere else on the page, adjust the top, left, width and height property values appropriately.

This overbar DIV displays over the top of the overs, however, DIVs without any borders or colouring are invisible, so to see how these DIVs fit together, for the purposes of this exercise, add the following borders and colouring to the style sheet to choose from:

<—! add this to the HTML Head section —>
<style type="text/css">
.BorderAqua {border-color: aqua;} 
.BorderLime {border-color: lime;} 
.BorderYellow {border-color: yellow;} 
.BkGrndAquaPale {background-color: #D0FFFF;}
.BkGrndLimePale {background-color: #D8FFC0;}
.BkGrndYellowPale {background-color: #FFFFC0;} 
.TxtAqua {color: aqua;} 
.TxtBlue {color: blue;} 
.TxtFuchsia {color: fuchsia;} 
.TxtGreen {color: green;} 
.TxtLime {color: lime;} 
.TxtRed {color: red;} 
.TxtYellow {color: yellow;}
</style>

Apply these style classes to the DIVs, so that they are readily visible:

<—! replace this in the HTML Body section —>
<div id="DivHeader" class="PosRel BorderSolid1px BorderBlue BkGrndBluePale 
 TxtBlue">Header Header Header</div>

<div id="DivSidebar" class="PosRel FloatLeft BorderSolid1px
 BorderFuchsia BkGrndFuchsiaPale">Sidebar Sidebar Sidebar

<div id="DivContent" class="PosRel FloatLeft BorderSolid1px BorderRed 
BkGrndRedPale Height150px TxtRed">Content Content Content</div>

<div id="DivFooter" class="PosRel BorderSolid1px BorderGreen BkGrndGreenPale 
 TxtGreen">Footer Footer Footer</div>

<div id="DivOver" class="PosAbs Width150px Height150px 
 Pos150pxTopLeft BorderSolid1px BorderFuchsia BkGrndFuchsiaPale
 TxtFuchsia">Over Over Over</div>

 

 

References:

1. http://www.w3.org/MarkUp/html3/divisions.html

2. http://www.microsoft.com/windows/
ie/community/columns/historyofie.mspx

3. http://www.eskimo.com/~bloo/indexdot/history/netscape.htm

4. http://www.markschenk.com/opera/history.html

5. http://www.blooberry.com/indexdot/html/supportkey/d.htm

6. http://www.codehelp.co.uk/html/deprecated.html

7. http://www.alistapart.com/stories/tohell/

8. http://www.webstandards.org/learn/faq/

9. http://www.alistapart.com/articles/separation/

10. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/SGML.html

11. http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

12. http://ripremixburn.blogspot.com/2006/10/code-cleanout-separate-content-from.html

13. http://www.youtube.com/watch?v=6gmP4nk0EOE

14. http://www.w3.org/TR/REC-html40/conform.html#deprecated

15. http://en.wiktionary.org/wiki/Gist