Creating Div Layouts, Div Overlays using CSS Styles

In HTML Div layouts or Div overlays can be created easily with the help of CSS styles. For creating CSS based Div layouts you must have good knowledge of CSS styles, CSS Rules and different types of CSS properties. The HTML Div tag is an element that draws just logical boundaries between other HTML tags. Div layouts or Div overlays consist of multiple Div tags nested inside each other and are positioned in such a way so that they could provide an interactive structure and design to the web page. The HTML Div tag provides a container type layer object that can hold the set of HTML tags within its specified boundaries. You can learn from the previous tutorial: What is Div Tag in HTML?

In this tutorial we will discuss few things that you must be familiar about Div tags and CSS styles to create the simple Div based layouts.

HTML Div Layouts and CSS Styles

In HTML you can customize the look and feel of each HTML tag using CSS styles. You can also change the look and feel as well as overlay of Div layouts using CSS styles. The Div tag supports attributes such as id, class and style. These attributes allow you to play with Div tag and design the div based layout easily. There are some tricks and hacks that are required to display the similar div layout arrangement on different web browsers such as IE, FireFox, Chrome, Opera etc. All these tricks can be implemented through CSS styles. For example combination of margin and width property of CSS styles enables you to align the div position to the center of web page. You can learn this from the tutorial: HTML Div Align to Center Position using CSS.

Div Overlays and Positioning using CSS Styles

CSS Styles and its properties allow you to fix the position of div tag relative to the web page. You can also create the Div Overlay by nesting the multiple Div elements inside the other Div container and can set the position of nested Div elements relative to their parent Div element container. All this can be done easily with the help of CSS Style Position property. Different values of CSS Position property enable you to place the Div element anywhere on the web page easily. You can learn it with example from the previous tutorial: HTML Nested Div Positioning Using CSS Position Styles.

We can design tableless Div layouts having single column, 2 column or 3 column div overlays with the help of CSS styles. Continue next to learn about How to Create Div Columns using CSS Styles. Further it also includes new tutorials for Div Column layouts and examples using CSS styes.