Core CSS
Lesson 4: Handling Overflow
Overview
When an element is placed on a page and its size is set, it is possible that the content of the element may not fit completely within the element. This frequently happens, especially when a page is resized to display on multiple devices. When the content does not fit within an element, it triggers an overflow condition, which CSS provides several ways to handle via the overflow property.
overflow:visible;
The default value for the overflow property, when nothing is specified, is visible. When the overflow value is set to visible or is not explicitly set, then any overflow text spills out the bottom of the element as shown below. The example below has no value specified for the overflow. So, it is the same as overflow:visible;. The paragraph element size is set to 400 x 200 pixels and the background color is set to light gray to illustrate the actual size of the element. Notice that the text extends outside the bottom element. This is generally not what we would want to see because the content is not contained within the element.
Example1.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<p style="background-color:lightgray;width:400px;height:200px;">First, I thank my God through
Jesus Christ for all of you, because your faith is proclaimed throughout the world. For God,
whom I serve with my spirit by announcing the gospel of his Son, is my witness that without
ceasing I remember you always in my prayers, asking that by God's will I may somehow at last
succeed in coming to you. For I am longing to see you so that I may share with you some
spiritual gift to strengthen you—or rather so that we may be mutually encouraged by each
other's faith, both yours and mine. I want you to know, brothers and sisters, that I have often
intended to come to you (but thus far have been prevented), in order that I may reap some
harvest among you as I have among the rest of the Gentiles. I am a debtor both to Greeks and to
barbarians, both to the wise and to the foolish—hence my eagerness to proclaim the gospel
to you also who are in Rome.</p>
</body>
</html>Overflow Visible (Default)
overflow:hidden;
The simplest and most direct way to stop the content from extending outside the element is to set the overflow value to hidden: overflow:hidden;. Using this value will clip the content that extends outside the element. However, it has a problem in that the rest of the clipped content can not be accessed by the user. The clipped content becomes, effectively, nonexistent to the user, as shown in the example below. To remedy this problem, the overflow property offers us a couple options that we demonstrate in the later examples.
Example2.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<p style="background-color:lightgray;width:400px;height:200px;overflow:hidden;">First, I thank
my God through Jesus Christ for all of you, because your faith is proclaimed throughout the
world. For God, whom I serve with my spirit by announcing the gospel of his Son, is my witness
that without ceasing I remember you always in my prayers, asking that by God's will I may
somehow at last succeed in coming to you. For I am longing to see you so that I may share with
you some spiritual gift to strengthen you—or rather so that we may be mutually encouraged
by each other's faith, both yours and mine. I want you to know, brothers and sisters, that I
have often intended to come to you (but thus far have been prevented), in order that I may reap
some harvest among you as I have among the rest of the Gentiles. I am a debtor both to Greeks
and to barbarians, both to the wise and to the foolish—hence my eagerness to proclaim the
gospel to you also who are in Rome.</p>
</body>
</html>Overflow Hidden
overflow:scroll;
The most direct method to allow the user access to all of the content, is to set the overflow value to scroll: overflow:scroll;. Setting the value to scroll puts scrollbars on the right and bottom edges, as shown below. Notice that the bottom scrollbar is not needed, but it appears there anyway. To eliminate the unnecessary scrollbars, we can use the final overflow value, as we show in the next example.
Example3.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<p style="background-color:lightgray;width:400px;height:200px;overflow:scroll;">First, I thank
my God through Jesus Christ for all of you, because your faith is proclaimed throughout the
world. For God, whom I serve with my spirit by announcing the gospel of his Son, is my witness
that without ceasing I remember you always in my prayers, asking that by God's will I may
somehow at last succeed in coming to you. For I am longing to see you so that I may share with
you some spiritual gift to strengthen you—or rather so that we may be mutually encouraged
by each other's faith, both yours and mine. I want you to know, brothers and sisters, that I
have often intended to come to you (but thus far have been prevented), in order that I may reap
some harvest among you as I have among the rest of the Gentiles. I am a debtor both to Greeks
and to barbarians, both to the wise and to the foolish—hence my eagerness to proclaim the
gospel to you also who are in Rome.</p>
</body>
</html>Overflow Scroll
overflow:auto;
The final overflow value provides the best functionality, since it only provides scrollbars where and when they are needed: overflow:auto;. To illustrate how the auto value works, we have two elements that are exactly the same, except that the first one is 200 pixels high and the second one is 300 pixels high. With these values, only the first element requires a scrollbar, as we can see in the example below. Notice that only the first element has a side scrollbar and neither has a bottom scrollbar because they are not needed.
Example4.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<p style="background-color:lightgray;width:400px;height:200px;overflow:auto;">First, I thank my
God through Jesus Christ for all of you, because your faith is proclaimed throughout the world.
For God, whom I serve with my spirit by announcing the gospel of his Son, is my witness that
without ceasing I remember you always in my prayers, asking that by God's will I may somehow at
last succeed in coming to you. For I am longing to see you so that I may share with you some
spiritual gift to strengthen you—or rather so that we may be mutually encouraged by each
other's faith, both yours and mine. I want you to know, brothers and sisters, that I have often
intended to come to you (but thus far have been prevented), in order that I may reap some
harvest among you as I have among the rest of the Gentiles. I am a debtor both to Greeks and to
barbarians, both to the wise and to the foolish—hence my eagerness to proclaim the gospel
to you also who are in Rome.</p>
<p style="background-color:lightgray;width:400px;height:300px;overflow:auto;">First, I thank my
God through Jesus Christ for all of you, because your faith is proclaimed throughout the world.
For God, whom I serve with my spirit by announcing the gospel of his Son, is my witness that
without ceasing I remember you always in my prayers, asking that by God's will I may somehow at
last succeed in coming to you. For I am longing to see you so that I may share with you some
spiritual gift to strengthen you—or rather so that we may be mutually encouraged by each
other's faith, both yours and mine. I want you to know, brothers and sisters, that I have often
intended to come to you (but thus far have been prevented), in order that I may reap some
harvest among you as I have among the rest of the Gentiles. I am a debtor both to Greeks and to
barbarians, both to the wise and to the foolish—hence my eagerness to proclaim the gospel
to you also who are in Rome.</p>
</body>
</html>Overflow Auto
Additional Notes on Overflow
Below, we illustrate three cases where the overflow is not specified. This means that its value is visible. In the first example, the element has no size; so the element just expands to encompass the content. In the second example, only the width is specified and the element extends its height as far as it needs to to contain the content. Finally, in the third example, only the height is specified and the content extends as far as it can to the side but still extends outside the bottom of the element. So, we see that with only a height specified, we can still have overflow; without a height, we do not have it because the element can always extend further down.
Example5a.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<p style="background-color:lightgray;">First, I thank my God through Jesus Christ for all of
you, because your faith is proclaimed throughout the world. For God, whom I serve with my
spirit by announcing the gospel of his Son, is my witness that without ceasing I remember you
always in my prayers, asking that by God's will I may somehow at last succeed in coming to you.
For I am longing to see you so that I may share with you some spiritual gift to strengthen
you—or rather so that we may be mutually encouraged by each other's faith, both yours and
mine. I want you to know, brothers and sisters, that I have often intended to come to you (but
thus far have been prevented), in order that I may reap some harvest among you as I have among
the rest of the Gentiles. I am a debtor both to Greeks and to barbarians, both to the wise and
to the foolish—hence my eagerness to proclaim the gospel to you also who are in Rome.</p>
</body>
</html>No Sizing
Example5b.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<p style="background-color:lightgray;width:400px;">First, I thank my God through Jesus Christ
for all of you, because your faith is proclaimed throughout the world. For God, whom I serve
with my spirit by announcing the gospel of his Son, is my witness that without ceasing I
remember you always in my prayers, asking that by God's will I may somehow at last succeed in
coming to you. For I am longing to see you so that I may share with you some spiritual gift to
strengthen you—or rather so that we may be mutually encouraged by each other's faith,
both yours and mine. I want you to know, brothers and sisters, that I have often intended to
come to you (but thus far have been prevented), in order that I may reap some harvest among you
as I have among the rest of the Gentiles. I am a debtor both to Greeks and to barbarians, both
to the wise and to the foolish—hence my eagerness to proclaim the gospel to you also who
are in Rome.</p>
</body>
</html>Width Only
Example5c.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<p style="background-color:lightgray;height:50px;">First, I thank my God through Jesus Christ
for all of you, because your faith is proclaimed throughout the world. For God, whom I serve
with my spirit by announcing the gospel of his Son, is my witness that without ceasing I
remember you always in my prayers, asking that by God's will I may somehow at last succeed in
coming to you. For I am longing to see you so that I may share with you some spiritual gift to
strengthen you—or rather so that we may be mutually encouraged by each other's faith, both
yours and mine. I want you to know, brothers and sisters, that I have often intended to come to
you (but thus far have been prevented), in order that I may reap some harvest among you as I
have among the rest of the Gentiles. I am a debtor both to Greeks and to barbarians, both to the
wise and to the foolish—hence my eagerness to proclaim the gospel to you also who are in
Rome.</p>
</body>
</html>Height Only
Containers with Other Content
So far, we have not seen an example that required a bottom edge scrollbar. This is just the nature of text content; it wraps at the right edge so that it fits within any width. However, if the content is something that does not fit within the side bounds, like an image, then a scrollbar will appear at the bottom with the overflow value set to auto. This case is shown below.
Example6.html
<!DOCTYPE html>
<html>
<head>
<title>XoaX.net CSS</title>
</head>
<body>
<div style="background-color:lightgray;width:600px;height:400px;overflow:auto;">
<img src="EcceAgnusDei_AlbertChevallierTayler.png" alt="Ecce Agnus Dei" />
</div>
</body>
</html>Bottom Scroll Bars
© 2007–2024 XoaX.net LLC. All rights reserved.