WebMonkey Beta 2.0: The Web Developer's Resource

Help|
Rss feeds
- Rss feeds
- Subscribe to:
- Tutorials
- Reference
- Code library
- All articles
- Monkey Bites Blog

Member Sign In

Not a member?

A Wired.com user account lets you create, edit and comment on Webmonkey articles. You will also be able to contribute to the Wired How-To Wiki and comment on news stories at Wired.com.

It's fast and free.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Join Webmonkey

E-mail address:

Username:

Password:

Confirm password:

Please send me occasional e-mail updates about new features and special offers from Wired/Webmonkey.

Yes No

Please send occasional e-mail offers from Wired/Webmonkey affiliated web sites and publications, and carefully selected companies.

Yes No

I understand and agree that registration on or use of this site constitutes agreement to Webmonkey's User Agreement and Privacy Policy.

Join Now

Webmonkey is a property of Wired Digital.

processing...

Retrieve Sign In

Please enter your e-mail address or username below. Your username and password will be sent to the e-mail address you provided us.

Webmonkey is a property of Wired Digital.

processing...

Welcome to Webmonkey

A private profile page has been created for you.

As a member of Webmonkey, you can now:

edit articles
add to the code library
design and write a tutorial
comment on any Webmonkey article

Webmonkey is a property of Wired Digital.

Sign In Information Sent

An e-mail has been sent to the e-mail address registered in this account.

If you cannot find it in your in-box, please check your bulk or junk folders.

Webmonkey is a property of Wired Digital.

Position Text and Images With Div Tags

/skill level/

/viewed/

0 Times

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> didn't really catch on until CSS-based layouts became the rage du jour. It won't solve all your problems -- you may still have to use a table occasionally -- but it works for formatting large blocks of text, images, and just about anything else that has an HTML tag around it.

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

I reffed the big game between Bridgeville and Casterlin.

Now, you might be tempted to do something like this:

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

<p align="center"><img src="monkey.gif"></p>

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

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

<div align="center">

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

<p><img src="monkey.gif"></p>

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

Tips

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 layout characteristics defined by the <div> tag take effect again.

Retrieved from "http://www.webmonkey.com/tutorial/Position_Text_and_Images_With_Div_Tags"