Dreamweaver Article

Designing with CSS – Part 2: Defining Style Properties and Working with Floats

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 external2.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. First attach the style sheet to your external2.html file as you learned earlier in this series.

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

The following demonstration uses the Lorem Ipsum Generator extension by Captain Cursor Creations.

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 250 pixels. To prevent having to re-preview from Dreamweaver I don’t view my pages as temporary files, by disabling this feature I can simply refresh the browser to see changes in my CSS. If you would like to work this way then complete the following steps.

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

Figure 5. Changing the browser preview settings

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

Play the demo: Investigating the Height Property

Once you have added the #BlueBox selector to your external.css file, open the external2.html file in the Design view. You should see something like Figure 6. 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 250 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 6. BlueBox div containing lorem ipsum dummy text

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.

Or you can complete the following steps that are shown in the above Captivate demo.

1. Select the new style button
2. Select the Advanced radio button
3. Type #BlueBox into the selector box
4. Click the OK button
5. The CSS rule definition dialog box opens
6. Select the box category
7. Type 250 into the width field
8. Type 250 into the height field
9. Type 10 into the padding field
10. Select the border category
11. Select solid from the style select list
12. Type 1 into the width field
13. Select black from the color cube from the color section
14. Select the Background category
15. Select the color cube from the Background color option
16. Select the #6699FF color cube
17. Save your CSS file
18. Select the external2.html file
19. Switch to code view
20. Insert the code for the BlueBox div
21. Save your work
22. Place your cursor inside the BlueBox div tags
23. Switch to design view
24. Select the Lorem Ipsum extension
25. Insert 1000 characters
26. Place your cursor in the text
27. Create a paragraph by hitting the enter key
28. Repeat the last two steps to create three paragraphs in all
29. Save your work
30. Preview the page in Firefox
31. The text spills outside the div, this is correct behavior
32. Preview the page in Internet Explorer
33. The BlueBox div expands to accommodate the content, this is wrong
34. Open your css file
35. Add overflow: auto; to your BlueBox rule
36. Preview the page again in both browsers - both browsers show scroll bars for the div

Now that you understand how height works and the pitfalls you may encounter, use the CSS panel, or manually edit the CSS code to 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 7). 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 7. #BlueBox div in Internet Explorer (left) and Firefox (right) with the height and overflow properties removed from the div

Page 4 of 5

Previous Page

Next Page