Understanding cascading style positioning

Topic status automatically displays here - do not remove.

Add me to your favorites! Bookmark this topic Print me! Print this topic

This topic explores Cascading Style Sheets (CSS) support for content positioning, using both div and table layout.

Tables used to be the only reliable method for HTML page element positioning, however with the advent of CSS 2, tables are deprecated for anything other than tabular data display.

Tables used to be used with set dimensions to position their contents across a webpage. If you needed finer control, you could always add another table within a table cell. However, they become proportionately difficult to understand, let alone to maintain control, when tables were nested within tables, within tables, etc. After 3 levels, it all became too messy.

Divisions are the preferred method for element positioning using CSS 2. Divs can be statically positioned, or floated to any position on the page, even stacked and overlapped. Lets have a look at some examples.

The following HTML code creates four Divs, each with a unique ID and with separate content:

<div id="Div1">One One One One One One One One One One One One One One One One One One</div>
<div id="Div2">Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two</div>
<div id="Div3">Three Three Three Three Three Three Three Three Three Three Three Three</div>
<div id="Div4">Four Four Four Four Four Four Four Four Four Four Four Four Four Four</div>

Notice that there are no style elements or inline formatting of the divs or their contents in the HTML code.

If we simply inserted this HTML into an HTML page, it would display inline as follows:

One One One One One One One One One One One One One One One One One One

Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two

Three Three Three Three Three Three Three Three Three Three Three Three

Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four

Now we can use CSS to apply styles and formatting to our sample Divs. The following CSS example adds a thin coloured border to each Div and colours and centres the text so that we can readily identify them:

#Div1 {
	border: thin solid blue;
	text-align: center; 
	color: blue;
}

#Div2 {
	border: thin solid fuchsia;
	text-align: center; 
	color: fuchsia;
}

#Div3 {
	border: thin solid lime;
	text-align: center; 
	color: lime;
}

#Div4 {
	border: thin solid orange;
	text-align: center; 
	color: orange;
}

Which displays as:

One One One One One One One One One One One One One One One One One One

Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two

Three Three Three Three Three Three Three Three Three Three Three Three Three

Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four

Now that we've got some readily identifiable Divs to work with, lets form them into 100 pixel squares. As each border is 1 pixel wide, and as there are two borders per width or height, the size of the Div is set to (2x1=) 2 pixels less than the desired box size (100-2=98).

The following CSS examples are added to the previous examples, and highlighted in red so that you can readily see which rules have been added:

#Div1 {
	border: thin solid blue;
	text-align: center; 
	color: blue;
	width:98px;
	height:98px;
}

#Div2 {
	border: thin solid fuchsia;
	text-align: center; 
	color: fuchsia;
	width: 98px;
	height: 98px;
}

#Div3 {
	border: thin solid lime;
	text-align: center; 
	color: lime;
	width: 98px;
	height: 98px;
}

#Div4 {
	border: thin solid orange;
	text-align: center; 
	color: orange;
	width: 98px;
	height: 98px;
}

This displays as:

One One One One One One One One One One One One One One One One One One

Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two Two

Three Three Three Three Three Three Three Three Three Three Three Three

Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four Four

To demonstrate how CSS can control the positioning of HTML elements, lets position them relatively across the page, instead of down the page.

As previously, the following CSS examples are added to the previous examples:

#Div1 {
	border: thin solid blue;
	text-align: center; 
	color: blue;
	width:98px;
	height:98px;
	position:relative;
	left:20px;
	top:0px;
}

#Div2 {
	border: thin solid fuchsia;
	text-align: center; 
	color: fuchsia;
	width: 98px;
	height: 98px;
	position: relative;
	left: 120px;
	top: -100px;
}

#Div3 {
	border: thin solid lime;
	text-align: center; 
	color: lime;
	width: 98px;
	height: 98px;
	position: relative;
	left: 220px;
	top: -200px;
}

#Div4 {
	border: thin solid orange;
	text-align: center; 
	color: orange;
	width: 98px;
	height: 98px;
	position: relative;
	left: 320px;
	top: -300px;
}

See that the left and top values for each Div are relative to their position in the HTML flow. For example, to align the Divs so that they sit next to each other, each has its left setting increased, and its top setting given a progressively larger negative value. This displays as: