Showcase and discover digital art at yex

Follow Design Stacks

Subscribe to our free newsletter to get all our latest tutorials and articles delivered directly to your inbox!

Designing with CSS – Part 2: Investigating the Height Property

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

Changing the browser preview settings

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.

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.

The blue box div containing the lorem ipsem text

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.

The Blue Box div in Internet Explorer and Firefox with the height and overflow properties removed from the BlueBox div

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

Comments