October 20, 2001 - DIV's Dimensions

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

Yehuda Shiran, Ph.D.
Doc JavaScript

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!