HTML and CSS Reference
In-Depth Information
Figure 9-19. Absolutely positioned elements aren't part of the normal content flow, so containers will behave as if the
element isn't even there
It appears to be a similar problem as what you saw with floats earlier in this chapter, but this element isn't
overflowing its container, it's overlapping an element that no longer contains it, at least as far as the
browser's rendering is concerned. There's no way to “clear” a positioned element and make the box
expand around it. The only way to ensure the box will always be tall enough to visually frame the image is
to change the box's height. You could specify a fixed height to make the box exactly the right size, but then
any added text could overflow and spill out of the box, so a fixed height is a bad idea. Clearly what we
need here is a way to tell the box to be at least as tall as the image, but still let it expand vertically when it
needs to. And, sure enough, we can do just that.
The min-height property specifies an element's minimum height. The element can expand naturally
beyond that height when it needs to accommodate more content, but it won't collapse any smaller than
that minimum height. If we add a min-height to our comment box that matches the height of the avatar
image (plus any padding or borders), the box will always be at least that tall, even if its text contents are
.comment {
background-color: #e6f2f9;
width: 415px;
padding: 15px 135px 0 15px;
border: 2px solid #98b8cd;
position: relative;
min-height: 115px;
You can see the result in Figure 9-20. The first comment box expands around its content as usual, and the
second comment box collapses to the minimum height so it can still frame the positioned image.
Search WWH ::

Custom Search