RSS
Atom
FeedburnerThe overflow property is used to specify how a block element handles content that is too large to fit inside it. There are five possible values for the overflow: visible, hidden, scroll, auto, and inherit. Inherit specifies that the element is to have the same value as the element it is contained in. The other values are explained and demonstrated below.
The code for the first example is shown here with the overflow specification in bold:
<div style="background-color:#DDDDDD; width:300px; height:160px; padding:10px; border:5px solid #444444; margin:30px; overflow:visible;">
<p style="width:300px;">(Proverbs 30:11-14) "There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men."</p>
</div>
visible
The value visible is the default that is used when no value is specified, and it means that all of the content is displayed whether or not it fits inside the element. As shown below, this can look sloppy if you are not careful.
(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”
hidden
Using the value hidden, fixes the problem of the sloppy look and it forces all of the content outside the element to be clipped. Unfortunately, this can make some of the content unreadable.
scroll
Setting the overflow value to scroll, forces the element to add scroll bars that allow the user to scroll through all of the content. This makes it possible for the user to see all of the content even if it does not fit inside the element. Unfortunately, the scroll bars are displayed whether we need them or not. Notice that the horizontal scroll is not needed in this example. However, the horizontal scroll bar is still there taking up space.
(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”
auto
The final setting, auto, adds scroll bars only when and where they are needed. On the left, we have an element that has been stretched so that it can fit all of the content without needing scroll bars. On the right, we have a shorter block that requires only a vertical scroll bar. Both of these are specified as auto.
(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”
(Proverbs 30:11-14) “There is a generation that curseth their father, and doth not bless their mother. A generation that are pure in their own eyes, and yet are not washed from their filthiness. A generation, whose eyes are lofty, and their eyelids lifted up on high. A generation, that for teeth hath swords, and grindeth with their jaw teeth, to devour the needy from off the earth, and the poor from among men.”