How to Hide an Overflow DIV
Knowledge of CSS (Cascading Style Sheets) gives the web designer almost magical power over the format of Web page content. A designer skilled in CSS can even make text and other content seem to disappear.
The CSS property DIV (Web page division), allows you to divide your content into discrete blocks. Each block can then be formatted and styled. The design of a Web page often dictates that blocks of content fit into predetermined slots of a specific height and width. Sometimes, the amount of content in a block exceeds the space allotted to it. When this happens, the excess content will "run over" and cover content below it. The Web page visitor will see a jumbled mess with content covering other content. The CSS property "overflow" provides a way to prevent this from happening.
Other People Are Reading
Instructions
-
-
1
Open your HTML editing application. Load the Web page containing the DIV you wish to edit. If you are using a WYSIWYG (What You See Is What You Get) editor, change to the HTML or source mode so that you can see and edit the actual HTML code.
-
2
Select the DIV you wish to apply the "overflow" property to. The height of the DIV should be fixed at a specific height using CSS property, "height". For example, if you want your DIV to be 200 pixels high, add this CSS style: "<DIV style="height: 200px" >."
-
-
3
Add the following value to the DIV style property: "overflow:hidden;". The CSS DIV property "overflow" allows you to control the amount of content displayed and avoid content "run over." The property "overflow" has several values for the designer to choose from: visible, hidden, scroll, auto and inherit. The "overflow" property value "hidden" cuts off the content display at the predetermined DIV height. For instance if your DIV has a width of 400 pixels and a height of 200 pixels your DIV would be: "<DIV style="width: 400px; height: 200px; overflow: hidden">."
-
4
Save the file. Test your design. Open up your Web browser and load the Web page you worked on. Any content that does not fit within the 200-pixel limit you set will be clipped or hidden from view. The over-flowing content is still there, but the Web page visitor will not see it. Adjust the height of the DIV until you can display the most amount of content in the space your page design allows.
-
1
Tips & Warnings
Another property of "overflow" adds scroll bars to your DIV. Adding "overflow:scroll" to your content DIV allows the visitor to use scroll bars to see all the content.
Older web browsers may not correctly display the CSS width, height, and overflow properties. Always test your work with different browsers and different operating systems if possible.
References
Resources
- Photo Credit Comstock/Comstock/Getty Images
