Understanding - Cascading Styles Sheets

Lotech Solutions ( www.lotechsolutions.com)

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 three 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>

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:

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 red;
	text-align: center; 
	color: red;
}

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

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

Which displays as:

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 style rules have been added:

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

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

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

This displays as:

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 red;
	text-align: center; 
	color: red;
	width:98px;
	height:98px;
	position:relative;
	left:20px;
	top:0px;
}

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

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

The left and top values for each Div are relative to their position in the HTML flow, each with its left setting increased, and its top setting given a progressively larger negative value. This displays as:

Unfortunately, it appears that the 'relative' position preserves the space of the Divs in the HTML flow, which leaves an unused space on the page beneath the Divs. That is why there is such a large blank space above this paragraph. We have the Divs positioned where we want them—side-by-side—however, there is now an unused space beneath them.

To make use of that space, and have the HTML flow fill-in the gap, it is necessary to use the 'absolute' position setting for all but the first Div in the group, and enclose the whole Div group inside another Div, to provide a container for the absolute position values.

The following HTML code is the same HTML sample as originally used above, however, it is now wrapped within a containing Div (highlighted in red for your easy identification):

<div id="DivHolder">
<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>

Notice that there are still no style elements or inline formatting of the Divs or their contents in the HTML code. All of the styling and layout information is kept separate from the text or data, and stored in the CSS. Once again, and as before, the following CSS style rules are added to the previous examples and changes are highlighted in red:

#DivHolder {
	position:relative;
}

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

#Div2 {
	border: thin solid green;
	text-align: center; 
	color: green;
	width: 98px;
	height: 98px;
	position: absolute;
	left: 120px;
	top: 0px;
}

#Div3 {
	border: thin solid blue;
	text-align: center; 
	color: blue;
	width: 98px;
	height: 98px;
	position: absolute;
	left: 220px;
	top: 0px;
}

 

With appropriately calculated values for the positioning of these Divs, they can be made to sit side-by-side as above, or made to overlap, or display apart, as follows:

In the example above, Div1 has its left set to 25%, Div2 has its left set to 33%, and Div3 has its right set to 25%. You might think that if Div3 had its left set to 75%, it would be the same, however, this does not take into account the width of Div3. If that width was set to a variable percentage, it could be predetermined to achieve the same result. For example, ifyou wanted the width of Div3 to be 100px, and you know the width of the page was set to 688px, 

 

Microsoft (MS) Internet Explorer (IE) since version 5, has had the ability to dynamically calculate property values—such as widths and positioning—dynamically. For example, positioning an item in the exact horizontal centre of the page can be calculated by the browser at display time using a formula such as the following for the left value:

object.style.left=(document.body.clientWidth/2) - (object.offsetWidth/2);

 

[to be continued]

---

 

---

See Also

Lotech Solutions' Tips, Tricks, and Procedures

---

email webmaster

Copyright Lotech Solutions. All rights reserved.