Loading ...

Understanding CSS Overflow Property | CodeAsp.Net

Understanding CSS Overflow Property

Understanding CSS Overflow Property

 /5
0 (0votes)

Recently one of my developers asked me regarding the overflow property of CSS. He was having some confusion regarding various options (visible, hidden, scroll and auto) provided in overflow property. Therefore I decided to write an article on same which will put some light on the overflow property of CSS. While working with HTML pages we all have boxes on it. By boxes I mean to say square or rectangular containers on the page. These containers have some height and width. If the height and width are fixed the content inside the container will be placed accordingly and when your content becomes large which is very obvious and the height and width of your container is not enough to accommodate that content then comes the role of overflow property.


overflow: visible;

This is the default option of overflow property. In this mode the content which does not get fit inside the container of specified width and height will overflow from the container and will overlap the content outside the box. Below is the screenshot for it:


When the content is overflowed from the container in the visible mode the flow of the page is not affected. The content will just overlap the rest of content outside the container. Below is the screenshot for it, you can see there is a link just below the container and it doesn't get shifted below, it remains there according to the design but the content inside the box will be overflowed over it. 



overflow: hidden;

This will hide everything which appears to overflow outside the container. So if the content's width or height is greater than the container dimension, the extra content will be stripped off and will not be visible to the user. This behaves as opposite of overflow:visible option. Below is the screenshot of the same and you can see in it that the overflowed content is not visible in the box.



overflow: scroll;

This option will work like overflow:hidden i.e. it will hides the content overflowing outside the box but will add scroll bars to box. These scroll bars will help the user to view the content. But there is one disadvantage of this option which is that this option will add scroll bars to container no matter the content is large or not with respect to container. You can see in the below screenshot that the red scroll is not needed since we have enough width to accomodate the container but still it is coming. 




overflow: auto;

This option will behave same as overflow:scroll but this will not add the scroll when the content is less than the container. In the below screenshot you can see that only vertical scroll is added to the container to view the content. Horizontal scroll has not been added to the container which was getting added in the previous overflow:scroll option.



HTML code to test the above properties:

Below is the code to test the various options of overflow property. I have taken a div and 4 radio buttons(one for each option) . Om clicking each of these radio buttons you will see how it affects the layout of container div.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .container
        {
            float: left;
            width: 600px;
            height: 250px;
            border: 1px solid black;
            padding: 10px;
            margin: 5px 10px 20px 20px;
        }
        .container-visible
        {
            overflow: visible;
        }
        .container-hidden
        {
            overflow: hidden;
        }
        .container-auto
        {
            overflow: auto;
        }
        .container-scroll
        {
            overflow: scroll;
        }
    </style>
</head>
<body>
    <form id="form1" >
    <div id="OverflowSelectionDiv">
        <input id="SetOverflowVisibleRadio" type="radio" value="0" name="SetOverflow" /><label
            for="SetOverflowVisibleRadio">Set overflow: visible;</label>
        <br />
        <input id="SetOverflowHiddenRadio" type="radio" value="1" name="SetOverflow" checked="checked" /><label
            for="SetOverflowHiddenRadio">Set overflow: hidden;</label>
        <br />
        <input id="SetOverflowAutoRadio" type="radio" value="2" name="SetOverflow" /><label
            for="SetOverflowAutoRadio">Set overflow: auto;</label>
        <br />
        <input id="SetOverflowScrollRadio" type="radio" value="3" name="SetOverflow" /><label
            for="SetOverflowScrollRadio">Set overflow: scroll;</label>
        <br />
    </div>
    <br />
    <div>
        <h2 id="heading">
            overflow: hidden;</h2>
    </div>
    <div id="container" class="container container-hidden">
        Lectus non, aenean. Pellentesque proin mid urna elementum. Ut cras amet rhoncus
        sagittis auctor pid risus porta elit integer, tincidunt. A nunc elementum dis! Ut
        sed non parturient a magna, in odio odio risus auctor tempor velit porta et cum
        mid integer tincidunt mauris ultricies, odio nec turpis tincidunt aenean a mattis
        in mus. Rhoncus integer! Cursus nisi, nascetur mauris, arcu, dignissim elementum
        parturient. Tincidunt? Eros, egestas magna augue lectus. Nisi in diam magna cum
        aliquam porta urna elementum ac adipiscing placerat, egestas. Porttitor. Lundium
        vel et nisi nunc enim quis porta enim augue egestas a! Urna amet. Amet auctor ac
        lundium? Urna adipiscing elementum, porta elementum urna sociis aenean massa nunc,
        hac scelerisque, massa proin. Adipiscing, urna sed pid. Porta in et pid enim? Nisi
        diam pellentesque, sociis mauris non aenean mus lacus in, dis augue, porta risus
        porttitor habitasse montes risus lundium scelerisque, tincidunt! Urna, magna odio,
        ac! Pulvinar lundium vel? Scelerisque! Rhoncus pulvinar proin hac a, hac sit enim.
        In auctor. Dolor dapibus penatibus, scelerisque, pulvinar adipiscing arcu turpis
        placerat tristique, quis, aliquet ultrices sed turpis. Porta auctor elementum magna
        tortor sagittis, turpis a ultricies! Augue amet, ultrices. Massa aliquam! Egestas
        lectus ultrices eu habitasse enim! Tortor ridiculus nunc, lorem! Lectus nec scelerisque
        magnis velit, sed! Platea egestas! A lorem elementum elit. Risus, non etiam ut habitasse
        tristique? Et habitasse risus cras nascetur et porttitor? Dictumst. Ut. Odio rhoncus
        sed et? Non turpis auctor. Est mid. Aliquam in aliquet penatibus in et risus sit
        natoque integer lacus? Rhoncus purus cras ac ultrices in integer proin natoque placerat
    </div>
    <br />
    <br />
    <div style="clear: left;">
        <a href="javascript:history.go(-1)"><< Go back the the blog</a>
    </div>
    </form>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

    <script type="text/javascript">
        var container = document.getElementById('container');
        var heading = document.getElementById('heading');

        $('#OverflowSelectionDiv').find('input:radio').click(function() {
            switch (parseInt(this.value, 10)) {
                case 0:
                    container.className = 'container container-visible';
                    heading.innerHTML = 'overflow: visible;';
                    break;
                case 1:
                    container.className = 'container container-hidden';
                    heading.innerHTML = 'overflow: hidden;';
                    break;
                case 2:
                    container.className = 'container container-auto';
                    heading.innerHTML = 'overflow: auto;';
                    break;
                case 3:
                    container.className = 'container container-scroll';
                    heading.innerHTML = 'overflow: scroll;';
                    break;
                default:
                    break;
            }
        });
    </script>

</body>
</html>


Dynamically the container will be set with the following classes and on basis of it its layout will change.

 .container-visible
        {
            overflow: visible;
        }
        .container-hidden
        {
            overflow: hidden;
        }
        .container-auto
        {
            overflow: auto;
        }
        .container-scroll
        {
            overflow: scroll;
        }

That's it we are done with the discussion on various options which come with overflow property of CSS. Do let me know your feedback, comments.

Comments (1)

   
nazihjr
nazihjr
very useful articles especially the DDL using jQuery, thank you so much and i wish feeding articles less than a week. thanks.
4/24/2013
 · 
by
  • :*
  • :*
  • :
 *

Top Articles