Electric Type

Multimedia

About Us

News

Help

The Wonderful <div> Tag Makes Markup Easier
by Aaron Meyers 14 May 1997

Aaron Meyers likes to play Dungeons & Dragons with that happy gnome Goofnaw in the mist-shrouded hills of Humboldt County. What a freak.

Page 1

Are you sick of putting align in every tag just to get a page to lay out properly? And how do you feel about table hacks for positioning images? I thought so. Well, never fear - the <div> tag is here.

Although it's been around since HTML 3.0, <div> hasn't really caught on yet. I think it's pretty useful, though, and recommend you give it a try. It won't solve all your problems - you'll still have to use tables occasionally - but it works fine for formatting large blocks of text, images, and just about anything else that has an HTML tag around it. It's supported by Netscape Navigator 2.0+ and Microsoft Internet Explorer 2.0+, and is particularly effective when used with stylesheets. (I'm just going to stick to the basics today, but if you want to learn more about <div> and stylesheets.

So let's get started. Say you have some text, an image, and then some more text, and you want to center them on your page, like this:

Hi, I'm Mattmarg.

Now, normally you might do something like this:

    <h3 align=center>Hi, I'm Mattmarg.</h3>

    <p align=center><img src="bball2.jpg">

    <h4 align="center">I reffed the big game between Bridgeville and <a href="http:www.hits.org/casterlin/">Casterlin</a>.</h4>


But with the mighty <div> tag, your code would look like this:

    <div align="center">

    <h3>Hi, I'm Mattmarg.</h3>

    <p><img src="bball2.jpg">

    <h4>I reffed the big game between Bridgeville and <a href="http:www.hits.org/casterlin/">Casterlin</a>.</h4>

    </div>

Cool, eh? The <div> tag will also work with other tags, like tables, forms, and lists.

But wait, there's more. What if you want those two paragraphs aligned to the left side of your page, but you want the image aligned in the center? Well, you can overwrite <div> tags by simply adding an align attribute to the tag you want to be different. Once the tag closes, the <div> tag takes effect again.

Pretty easy, right? Why don't you give it a try?


Dynamic HTML  

Frames  

HTML Basics  

Stylesheets  

Tables  

XML  

Javascript  

Database Connections  

Intro To Perl  

HTML 4.0  

User Blogs

Screen Shots

Latest Updates

Contact Us

Valid HTML 4.01!
Valid CSS!

Breadcrumb

© ElectricType
Maintained by My-Hosts.com
Site map | Copyright | Disclaimer
Privacy policy | Acceptable Use Policy
Legal information.