Div tag

The first button we find in the left in the “Layout” tab in the “Insert” toolbar, is the “Insert Div Tag” button.

Let me first explain what a Div tag is and what it can do for us.

A Div stands for division, which means a “part”.
We can use Div tags to divide our pages into several parts.
A div tag can be of any size that you want and you can apply it to just about everything, text, graphics, tables, another div tag, etc.
You can only have one div tag on one line.

I give an example:
I want to divide my page into three parts, one part for the title, one part for the content and another part for the footer.

To add a div tag to your page, first place the cursor at the point where you’d like to have.

In the “Insert” toolbar, choose the “Layout” tab and click the “Insert Div Tag” button.

In the “Insert Div Tag” dialog, you choose “At insertion point” in the top box, and in the ID box, you give it a name, no matter what and click the “New CSS Style” button.
The do not have to do the later, but the problem is that this div tag can not be saved otherwise.
Click OK.

In the next window, “selector type” box and “Selector” box are already completed and in the section “Define in”, determine whether you want to add this line into the existing CSS rule file in the document you’re working or create new style sheet file to save.
Make your choice and click the OK button.

In the “Css Rule Definition”, you can specify the settings for each category you want.
This we have already seen several times, so you already know how to do this.
The only thing I can tell you is that when you want the div tag (s) to the center, and by this I mean when you want to see the contents of your page centered in the browser window, regardless of the size of the monitor of the visitor of your site, you give the following settings in the “Box”.
Click OK when you’re done.

Repeat for each div tag you want to insert into your page.
As you can see in the image below I have added a total of three.
One for the header, one for content and one for the footer.
I have provided a different color and different width for each of them, so you clearly can see the different div tags.

Let us now see our page in the browser, you’ll see that regardless of the size of the screen, the different div tags will be displayed in the center.

Featured Courses

• Downloading iPad Apps
• Lesson 1: Introduction to Publisher
• Lesson 65: File Formats