`<DIV ...>`

ALIGN: text alignment

<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>.

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

<P>

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

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 sutff 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">
<!--
.warning
{
font-family:sans-serif;
color:red;
padding-left: 50pt;
padding-right: 50pt;
}
-->
</STYLE>

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
</DIV>

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.

	Helping ordinary people create extraordinary websites!
		ASK A QUESTION ANSWER A QUESTION SIGNUP LOGIN