You are here: Home / Computer / Web Site / Dreamweaver 8 / Div Tag

div tag

A DIV is a somewhat special Tag or marker. A DIV encompasses the content, and divides the page into sections. It is like a box, or a page inside a page. Every DIV is associated with an identification (Id). The positioning of the DIV is done by calibration of the Id inside CSS.

 

Presentation

Let's take a look at a DIV, whose Id is contained. In CSS this would look like this #content{...;}

In HTML, it would look like this

<div id="content">....blablablabla...</div> 

 

Inserting a DIV

You start with a blank page, hence without content nor a layout. In the menu bar, you select Layout (in the menu bar just under common). The second icon from the left is a "Insert DIV Tag".

How to insert a Div

Let's take the default value ( Insert: At insertion point )

Under ID, place the name of your ID (in our example it is edit)

Insert div tag window

Once that is done, go to properties, and make sure that ID Div name is also edit. Don't forget to click on <div#edit> at the bottom of the page

div ID window

There you go, you created a DIV which you called (ID) edit.

If you create DIV's in cascade, it will be easier to display your page in Code and to place the cursor anywhere inside the DIV Tag. This will prevent placement errors. In Design mode, it is possible for DIV to create invisible content if the content is empty.

 

Behaviour

When you write on a page, you have to section the DIV Tags. By this we mean that we give structure to the page: who does what where...

Example:

div tag behaviour example

or in HTML code

<DIV id:"header">...</DIV>
<DIV id:"containment">...<DIV id:"navigator">...</DIV>...<DIV id:"content">...<DIV>...<?DIV>
<DIV id:"footer">...</DIV>

The size of the fields identified by (id) is contained inside the bigger fields. For instance, the #navigator content cannot be bigger than the #containment field, and similarly, the #content field cannot be bigger than the #containment field either.

That is unless you use the Template mode, where the position is absolutely defined by the X and Y positioning on the page.