Webwork
/
The Div Tag
<div></div>

Of all the tags in the hypertext markup language, this is one of the most useful. This is because the division tag, in conjunction with CSS is used to determine the layout of much of a web page's content.

The div tag is a block element. This means it that it normally starts with a new line like the other block-level elements: <p>, <h1>, <ul>.

Note that you can place an inline element inside of a block element but you can't place a block element inside of an inline element. Example:

This is ok:
<div><a href="somewhere.html">Go somewhere.</a></div>

This is not:
<a href="somewhere.html"><div>Go somewhere.</div></a>

At its most basic, the div tag defines a rectangular area on a web page:

Source:
<div></div>
Web page:
 
(Above is empty because there is nothing in the div tag on the left.)
<div>123</div>
123
<div style="border: #c00 solid 1px; text-align: center; background:#ddeeff; ">123</div>
123

All of the style tags we've already talked about can be applied to a div tag - plus a lot more.

Since div tags in your document will probably not all have the same styling, you won't want to place general div style tags in the head of your document as you did with p tags.

To allow various div tags on your Web page to each have its own style, you identify them with class or id attributes:

Here's how it looks with a class attributes:

Source:
<style type="text/css">

.whatevernameyouwant {
   border: #c00 solid 1px;
   margin: 15px;
   text-align: center;
   background: #ddeeff;
}

.someothername {
   border: #00f solid 1px;
   margin: 15px;
   text-align: center;
   background: #ffdddd;
}

</style>

Above goes in head of doc. The "." in front of whatevernameyouwant tells the browser that it is looking at a classname. Below goes in body:

<div class="whatevernameyouwant">123</div>

<div class="someothername">456</div>
Web page:
123
456

Any div that you give a classname of "whatevernameyouwant" will have the whatevernameyouwant styles applied to it. You can make up whatever names you want for the classes but your life will be easier if you use useful descriptive classnames like "sidebar" or "imagethumbs."


With an id attribute you would use "#" sign rather than a ".":

Source:
<style type="text/css">

#whatevernameyouwant {
   border: #c00 solid 1px;
   margin: 15px;
   text-align: center;
   background:#ddeeff;
}

</style>

Above goes in head of doc. The "#" in front of whatevernameyouwant tells the browser that it is looking at a classname. Below goes in body:

<div id="whatevernameyouwant">123</div>
Web page:
123

As mentioned, the id attribute is used for unique occurrences and the class attribute is used for style groups that will be used mulitple times.

Previous | Webwork Table of Contents | Next >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma