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?