Investigating the Height Property

The height property is a common frustration for CSS newcomers, so I’ll take you through a little exercise to help you understand it. Use the steps in the demo below to create the following BlueBox style, and add the style to your external.html page. You can also find the completed BlueBox CSS rule in the completed external.css file, which is included in the sample download file linked at the beginning of the article.

#BlueBox {
 background: #6699FF;
 height: 100px;
 width: 250px;
 border: 1px solid #000000;
 }
  

The following demonstration uses the Lorem Ipsum Generator extension by Captain Cursor Creations. There is a link to download the extension at the beginning of this article.

Note: If you don’t want to install Lorem Ipsum Generator extension, you can add text of your choosing in the step where the extension is used. (For instance, you can search Google for “lorem ipsum” or find dummy text at www.lipsum.com.) In any event, to understand the point of this exercise, you will need to add enough text to push the div height past 100 pixels.

Once you have duplicated the steps in the demo above, open the external.html file in the Design view. You should see something like Figure 10. From the ruler on the left side of the window you can see that the div is a little over 250 pixels in height, yet you set it to be only 100 pixels high. Something is a little out of sync.

Note: Enable the ruler by selecting View > Rulers > Show. You will also notice that I have the Grid view enabled. You can enable the grid by selecting View > Grid > Show Grid. Adjust the grid settings by selecting View > Grid > Grid Settings.

Figure 10. BlueBox div containing lorem ipsum dummy text

Preview these settings in your test browser (press F12). Refresh the page to apply the new CSS settings to the page. If you are using temporary files to preview your pages, you will not be able to do this. This setting can be changed if you wish, as follows:

1. Select Edit > Preferences.
2. Select Preview in Browser from the Category list.
3. Deselect the “Preview using temporary file” option (see Figure 11).

Figure 11. Changing the browser preview settings

If you prefer not to do that, you can simply use the browser preview shortcuts as you would normally.

To demonstrate the problem, let’s test the page in Internet Explorer and Firefox. If you don’t have Firefox installed, I recommend installing it. It’s a good habit to test web pages in multiple browsers. Firefox is free and you can get it from Mozilla. Although testing pages is imperative, you should also be aware of the Dreamweaver browser compatibility check feature.

You will see two very different sets of behaviors in the overflow demo.

So, What to Do?

Using the CSS Style Definition dialog box, or by manually editing the CSS code, remove the overflow property you added to your #BlueBox rule. Also remove the height property and value from the rule:

#BlueBox {
 background: #6699FF;
 width: 250px;
 border: 1px solid #000000;
 }
 

Once you have removed the overflow and height properties, preview your external.html in both browsers again.

If no value is defined to restrict the div height, it is free to expand to whatever height is required to contain what it holds (see Figure 12). Generally, you shouldn’t set a height on your div tags—at least not unless it is absolutely necessary. Leave the height property out of your rules when you can and allow the contents to dictate the height of the containing element.

Figure 12. #BlueBox div in Internet Explorer (left) and Firefox (right) with the height and overflow properties removed from the div