What is Div Layer?

A div layer is a container that web contents, for example, texts, images, flash movies, etc, can be put into. At first glance a div layer works quite similar to a HTML table where you can also put web contents into. Many webpage designers like to use HTML table because it allow them to control the layout or position of web contents easily. However div layers allow you to control the position much easier with less HTML codes.

Okay! Let's create a div layer as shown below:

How to Create a Div Layer

A div layer, like HTML table, can be with or without border and with or without background color. However in order that you can see where is the div layer, a blue background color has been added.

A div layer can be created easily with the div tag as shown below:

id - An id (e.g. layer1) is required for each div layer for unique identification.

Styles of Div Layers

You may require to set some styles for the div layer before using it. The styles of div layers are usually setting with external style sheet or document styles within the head tag. There are a lot of style attributes that can assign to div layers. In our example above, we only assign the size and background color style attributes to the div layer.

Size of Div Layer:

The size of a div layer is assigned with the width and height style attributes.

Background Color of Div Layer:

The background color of a div layer is assigned with the background-color style attribute.

Position of Div Layer:

The default position of a div layer newly created is static. A static position means that the position of the div layer will appear where you create it. In our example, the div layer "layer1" is created under the the line "Okay! Let's create a div layer as shown below:"

Note: The position of div layers can be controlled easily with the Relative and Absolute style attributes.

CSS Style of Example layer1 Div Layer

HTML CSS Tutorial contents: What is a div layer? How to create a div layer?