HTML & CSS Direct Study

Layout Divisons - Why they are important

Divisions are the most commonly used layout technique used in today's modern websites. The division element gives the web designer the flexibility to move content and adjust the way it fits on the screen.

Each <.div> tag can be affected though class names and CSS style sheets.

Absolute Positioning
As you can tell in the example below each <.div> element can be changed within the style sheet to look unique and creative. In the below example four <.div> elements are shown using different colors. They are easily arranged using absolute formatting which allows us to move the div tags around to wherever we decide to put the content.

Div Example

As seen in the example div tags provide a lot of flexibility and many different formats.

Z-Index

By using the z-index a web designer is able to change the way that elements are stacked on the web site. Z-index is named for the use of the z dimension, because we are changing the order of how things are displayed in relation to the z axis. How the index works is to use a numerical value, the element with the highest z-value will appear on top.

As you can see in the following example we have taken the example above, but changed the way the divisions are ordered.

Z-Index Example

In conclusion:

As shown divisions can be a very easy, flexible, and creative way to design layouts for a web page. The <.div> tag has given more freedom to the web designers while also freeing up time that was used in order to create layouts. Currently the use of divisions on a web page is encouraged by the W3C as a way of being in correct HTML and CSS language.