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.
- Select Edit > Preferences.
- Select Preview in Browser from the Category list.
- Deselect the “Preview using temporary file” option (see Figure 5).
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.
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.
- Select the new style button
- Select the Advanced radio button
- Type #BlueBox into the selector box
- Click the OK button
- The CSS rule definition dialog box opens
- Select the box category
- Type 250 into the width field
- Type 250 into the height field
- Type 10 into the padding field
- Select the border category
- Select solid from the style select list
- Type 1 into the width field
- Select black from the color cube from the color section
- Select the Background category
- Select the color cube from the Background color option
- Select the #6699FF color cube
- Save your CSS file
- Select the external2.html file
- Switch to code view
- Insert the code for the BlueBox div
- Save your work
- Place your cursor inside the BlueBox div tags
- Switch to design view
- Select the Lorem Ipsum extension
- Insert 1000 characters
- Place your cursor in the text
- Create a paragraph by hitting the enter key
- Repeat the last two steps to create three paragraphs in all
- Save your work
- Preview the page in Firefox
- The text spills outside the div, this is correct behavior
- Preview the page in Internet Explorer
- The BlueBox div expands to accommodate the content, this is wrong
- Open your css file
- Add overflow: auto; to your BlueBox rule
- 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.
Comments