What is HTML CSS overflow property?

If we create any element in HTML and don't specify any limits then it will expand based on its content. But if we want to limit the dimensions of the element by giving it width and height properties we will be in trouble as the content grows bigger. Let's create a div element and put some text. As you can see in this case the text is well within the limits of the the div element so all works out great.

HTML CSS overflow property
<html>
<head>
    <title>CSS Overflow Property tutorial</title>
    <style type="text/css">
        div#overflow {
            width:300px;
            height:150px;
            background: #b0c4de;
        }
    </style>   
</head>
<body>

<div id="overflow">
    <p>
        HyperText Markup Language (HTML) is the main markup language for web pages.
        HTML elements are the basic building-blocks of webpages.
    </p>
</div>

</body>
</html>

Now let's make the text much larger than the div element content area.

HTML CSS overflow property
<html>
<head>
    <title>CSS Overflow Property tutorial</title>
    <style type="text/css">
        div#overflow {
            width:300px;
            height:150px;
            background: #eee9e9;
        }
    </style>   
</head>
<body>

<div id="overflow">
    <p>
        HyperText Markup Language (HTML) is the main markup language for web pages.
        HTML elements are the basic building-blocks of webpages.
        HTML is written in the form of HTML elements consisting of tags enclosed 
        in angle brackets (like &lt;html&gt;), within the web page content. HTML tags most 
        commonly come in pairs like &lt;h1&gt; and &lt;/h1&gt;, although some tags, known as empty 
        elements, are unpaired, for example &lt;img&gt;. The first tag in a pair is the start 
        tag, the second tag is the end tag (they are also called opening tags and closing 
        tags). In between these tags web designers can add text, tags, comments and other 
        types of text-based content.
    </p>
</div>

</body>
</html>

As you can see it just overflows into the other areas of the page causing a mess. So how do we solve this, well we have 3 choices


Make the CSS overflow propety to hidden

The overflow part of the content becomes invisible.

HTML CSS overflow property
    <style type="text/css">
        div#overflow {
            width:300px;
            height:150px;
            background: #eee9e9;
            overflow: hidden;
        }
    </style>  

Make the CSS overflow property to scroll

Content doesn't get lost here, the overflow is not displayed at once but you get a scroll-bar to see the rest of the content

HTML CSS overflow property
<style type="text/css">
 div#overflow {
  width:300px;
  height:150px;
  background: #eee9e9;
  overflow: scroll;
 }
</style>   

Make the CSS overflow property to auto

This is the best option. If there is content overflow you get a scroll-bar otherwise you don't.
<style type="text/css">
 div#overflow {
  width:300px;
  height:150px;
  background: #eee9e9;
  overflow: auto;
 }
</style> 
Note: There is another property for overflow know as visible. This is the default if you don't specify any overflow. In this case the overflow content is rendered outside the element's boundaries.

No comments:

Post a Comment

NO JUNK, Please try to keep this clean and related to the topic at hand.
Comments are for users to ask questions, collaborate or improve on existing.