• Home
• CSS Overflow Example
• Block Elements
• Button Generators
• Color Codes
• Levels
• Menus
• About CSS Stylesheets

• Background Images
• Positioning
• CSS templates

CSS Overflow Example

On a web page, everything you see is in a rectangular box. The size, positioning, and behavior of all these elements are controlled with CSS. Behavior as in how the box handles the content inside. When the content of the box is larger than the box itself and you forget to establish the height of the box, it will grow as large as required to contain the content within. On the other hand, if the height or width of the box is set and the content can't fit, the right settings can be adjusted.

Say we are creating a Viagra online website. We are creating a page that displays the content and the product description, and a small box for customers to buy the product. All that you see on the website is within the rectangles that we already spoke about. So the field where the product description goes might not fit the space assigned to it. Then the proper adjustments should be set to make that specific field so its behavior is properly determined to what is requested or needed.

If the content is considerably larger than the box its supposed to be in, one must determine if it's no problem to leave that feature undetermined. As a result, the box will automatically grow to fit the content as large it might be needed. Now, taking into consideration that sites like the one in our example require everything to match the same size and be very standardized, it's probably better to set the height and width of the different product pages to the same size for all of them, setting the overflow values for each box. That is why it's suggested that the content comes with a specific setting to determine to hide the exceeding text and set up the scroll option. So we must be aware of the correct and standard settings for each section of the page. Many would recommend to have a lay-out template ready before creating all the pages, so that every page with different content looks alike. They must also share the same display.