CSS Overflow property.

      A few days ago I was working on the design of a website when I faced a problem. Whenever I used the images, paragraph, heading or any other tag in the HTML, the text-box the box used to break and would again continue when the tag would end. Now obviously this was making the site look ridiculous. For example, whenever we put groceries in a plastic bag more than it can withstand the bag tears up. Now tried everything to keep that text box from breaking in between, until I found this solution.

     In your CSS style sheet when you add the box, you add the following attribute,

overflow: auto;

     Now this property works fine with all the browsers and is supported by CSS 2 and above. Here I have given the overflow property’s value as auto , that is it any accommodate any number of data and if it exceeds the limits then the browser simply adds a scroll bar to it. But depending on your requirement you can use (here overflow means the extra data which cannot be accommodated inside the box):

• visible: This one is a default and the overflow is not clipped.
• hidden: The overflow is clipped but the rest of the content is hidden…
• scroll: The overflow is clipped but the rest of the content can be see with the help of a scroll-bar.
• auto: The overflow is clipped and the decision of adding a scroll-bar is left up to the browser.
• initial: Sets this property to tis default value (visible).
• inherit: Inherits this property from its parent element.

      The overflow property basically, decides what will happen if the box isn’t capable of holding the entire content and what if the content breaks out of the box. Here I have an example of CSS box using this property:

         .box {    
      height: 500px;     
      width: 800px;
      overflow: auto;     
      background-color: #BFCFFF;
      text-align: center;
      padding-top: 25px;
      padding-left: 20px;
      padding-right: 20px;
      padding-bottom: 20px;
      margin-left: 260px;
      margin-top: 100px;}

You can also use ‘div’ instead of box if you want it for other things…Also, you can change the rest of other properties like margin, padding, text-alignment depending on your requirement.

Here is a screenshot of the box working on a html page:

    I also have a website that I made using this and a few other features that you might want to look at. To download it click here.(You need to replace the images and video paths (file-urls) in the html to the paths in your directory).