Understanding Display, Position, and Document Flow - CSS3 Foundations - page 163

When creating a web page, sometimes you find that content you want to place in a containing element is bigger than
its container. Throughout CSS3 Foundations , I have mentioned that you shouldn't restrict an element to a specific
height because in some browsers, a user can control the size of text and content may grow bigger than the height of
that element. If you do have content bigger than its containing element or you absolutely have to give an element a
specific height (clients and bosses can be pushy!), you can use the overflow property to better control how that
overflowing content is displayed—or not displayed, as the case may be.
Go ahead and restrict the height of the “Latest Blog Post” element:
1. In styles.css, add a new rule set for the .post element, under the .testimonials rule set:
.post {
height: 200px;
}
In Figure 9-26, I also gave the <aside class=”post”> element a red border along with its height of
200px to demonstrate the boundaries of that element. As you can see, with no specified overflow declar-
ation, the overflowing content is visible. Note that the containing element affects the document flow, but the
overflowing content does not. It all looks a bit messy and unreadable.
Figure 9-26 The “Latest Blog Post” box with overflowing content.