HTML DIVs


  1. HTML - Div Element(s)
  2. HTML - Div Layouts
  3. HTML - Div Layouts II
  4. Useful Tips

HTML - Div Element(s)

The <div> (Division) tag is nothing more than a container for other tags.

Much like the body tag, Div elements are block elements and work behind the scenes grouping other tags together.

Use only the following attributes with your div element, anything else should be reserved for CSS.

For the purpose of this example, we have included the style attribute
in order to color our div tag in order to bring a stronger visualization for our viewers.

        <body>
<div style="background: green none repeat scroll 0% 0%;
-moz-background-clip: border; -moz-background-origin: padding;
-moz-background-inline-policy: continuous;">

<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>

This results in:

SEARCH LINKS
Google

Above is a great visual about how a div plays the role of a container for other HTML elements,
applying a background color/image is the only real way to visualize your div tags.


HTML - Div Layouts

When HTML first began, web creators only had two choices. A table layout, or frames.

The div element provides a 3rd alternative, since a div can contain any/every other
type of html element within its beginning and ending tag.

        
        <div id="pretendmenu" bgcolor="fuchia" align="right" >
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a>
</div>
<div id="content" bgcolor="white" align="left">
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
</div>

This results in:

Content Articles

This paragraph would be your content paragraph with all of your readable material.



HTML - Div Layouts II

Advanced web developers find div elements to be far easier to work with than tables.

Adding more content or more links to the previous example will demonstrates why div is simpler.

Let's add a "LINKS" page to our menu, and another article of content below the existing content.

        <div id="menu" align="right" >
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a> |
<a href="">LINKS</a>
</div>
<div id="content" align="left" >
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<h5 >Content Article Number Two</h5>
<p>Here's another content article right here.</p>

</div>

This results in:

Content Articles

This paragraph would be your content paragraph with all of your readable material.

Content Article Number Two

Here's another content article right here.



Useful Tips

Place a <br style="clear:both"/> tag after the last adjacent division.

Beginners using divisions to structure web pages should use static rather than "liquid" page sizes.
That means using absolute size measurements, rather than percentages.

The division tag also accepts the align attribute.