spacer
Yehuda Shiran October 20, 2001
DIV's Dimensions
Tips: October 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs

The DIV element is very popular in DHTML-based pages. You can include other elements, text, and graphics inside it. It is interesting to note the dimensions of a DIV element, and how they change according to its content. Here is a DIV element that contains nothing:

<DIV STYLE="border-style:solid;border-color:purple">
</DIV>
And it looks like this:

Now, let's put some text inside:

Hello there!

You can see that the DIV's dimensions extend to include the elements inside the DIV. Now, let's add a marker as well:

<IMG SRC="marker.gif" WIDTH="10" HEIGHT="10" 
  BORDER="0" STYLE="position:relative; top:50; left:50">
The outcome is as follows:

Hello there!





Notice that the DIV element does not include the marker's image. Of course, you can control the dimensions yourself. When you set the DIV element's height as follows:

<DIV STYLE="border-style:solid;border-color:purple;height:200">
you'll get the right dimensions:

Hello there!

People who read this tip also read these tips:

Look for similar tips by subject:

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint