Follow Techotopia on Twitter

On-line Guides
All Guides
eBook Store
iOS / Android
Linux for Beginners
Office Productivity
Linux Installation
Linux Security
Linux Utilities
Linux Virtualization
Linux Kernel
System/Network Admin
Scripting Languages
Development Tools
Web Development
GUI Toolkits/Desktop
Mail Systems
Eclipse Documentation

How To Guides
General System Admin
Linux Security
Linux Filesystems
Web Servers
Graphics & Desktop
PC Hardware
Problem Solutions
Privacy Policy




<DIV ...>

<DIV ...>, a block-level element, simply defines a block of content in the page. Beyond defining a block, <DIV ...> itself doesn't do anything. For example, the following code creates a <DIV ...> element with two paragraphs inside of it. Notice that you can put <P ...> elements inside a <DIV ...>.

This is stuff before the <NOBR><CODE>&#60;DIV ...&#62;</CODE></NOBR>.

This is stuff inside the <NOBR><CODE>&#60;DIV ...&#62;</CODE></NOBR>.


This is more stuff inside the <NOBR><CODE>&#60;DIV ...&#62;</CODE></NOBR>.

This is stuff after the <NOBR><CODE>&#60;DIV ...&#62;</CODE></NOBR>.

which gives us:

This is stuff before the <DIV ...>.

This is stuff inside the <DIV ...>.

This is more stuff inside the <DIV ...>.

This is stuff after the <DIV ...>.

Because <DIV ...> is a block level element, visual browsers (e.g. MSIE and Netscape) render <DIV ...> elements with a line break before and after them. However, they don't usually put a full blank line before and after like a <P ...> element.

<DIV ...> is usually used in conjunction with styles of the ALIGN attribute to set some kind of effect for the content. For example, suppose you want a block of the page to be use a different font, font color, and be indented. To do this, first put some styles rules in the <HEAD> section of the document:

<STYLE TYPE="text/css">
padding-left: 50pt;
padding-right: 50pt;

These styles rules create a styles class named warning. You can then apply the class to a <DIV ...> element using the CLASS attribute:

<DIV CLASS="warning">
contents of DIV element

which gives us this:

WARNING: Do not look directly into the light or it will suck you in like a flea. We're dealing with big ugly powerful forces here, pal, so don't go trying that macho man stuff. Put your super-block-em sunglasses on and keep your eyes on the accountant.

In the next page we'll look at setting the alignment of the element.

  Copyright 1997-2002 Idocs inc. Published under the terms of the Open Content License Design by Interspire