Scribd
Upload
82 views5 pages

CSS Layout - Overflow

The document discusses different values that can be used for the CSS overflow property to control how content is displayed when it overflows an element's box. It demonstrates the visible, hidden, scroll, auto, and overflow-x/overflow-y values, showing how each clips or adds scrollbars to overflowing content in different ways. Removing the overflow property is also suggested to understand its default behavior.

Uploaded by

Lukman Hakim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
82 views5 pages

CSS Layout - Overflow

The document discusses different values that can be used for the CSS overflow property to control how content is displayed when it overflows an element's box. It demonstrates the visible, hidden, scroll, auto, and overflow-x/overflow-y values, showing how each clips or adds scrollbars to overflowing content in different ways. Removing the overflow property is also suggested to understand its default behavior.

Uploaded by

Lukman Hakim
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

CSS Layout - Overflow

<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: #eee;

width: 200px;

height: 50px;

border: 1px dotted black;

overflow: visible;

</style>

</head>

<body>

<h2>CSS Overflow</h2>

<p>By default, the overflow is visible, meaning that it is not clipped and it renders
outside the element's box:</p>

<div>You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's
box.</div>

</body>

</html>
<!DOCTYPE html>

<html>

<head>

<style>

div {

background-color: #eee;

width: 200px;

height: 50px;

border: 1px dotted black;

overflow: hidden;

</style>

</head>

<body>

<h2>CSS Overflow</h2>

<p>With the hidden value, the overflow is clipped, and the rest of the content is
hidden:</p>

<p>Try to remove the overflow property to understand how it works.</p>

<div>You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's
box.</div>

</body>

</html>

<!DOCTYPE html>
<html>

<head>

<style>

div {

background-color: #eee;

width: 200px;

height: 100px;

border: 1px dotted black;

overflow: scroll;

</style>

</head>

<body>

<h2>CSS Overflow</h2>

<p>Setting the overflow value to scroll, the overflow is clipped and a scrollbar is added
to scroll inside the box. Note that this will add a scrollbar both horizontally and
vertically (even if you do not need it):</p>

<div>You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's
box.</div>

</body>

</html>

<!DOCTYPE html>

<html>
<head>

<style>

div {

background-color: #eee;

width: 200px;

height: 50px;

border: 1px dotted black;

overflow: auto;

</style>

</head>

<body>

<h2>CSS Overflow</h2>

<p>The auto value is similar to scroll, only it add scrollbars when necessary:</p>

<div>You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's
box.</div>

</body>

</html>

<!DOCTYPE html>

<html>

<head>
<style>

div {

background-color: #eee;

width: 200px;

height: 50px;

border: 1px dotted black;

overflow-x: hidden;

overflow-y: scroll;

</style>

</head>

<body>

<h2>CSS Overflow</h2>

<p>You can also change the overflow of content horizontally or vertically.</p>

<p>overflow-x specifies what to do with the left/right edges of the content.<br>

overflow-y specifies what to do with the top/bottom edges of the content.</p>

<div>You can use the overflow property when you want to have better control of the
layout. The overflow property specifies what happens if content overflows an element's
box.</div>

</body>

</html>

You might also like