Overflow: Hidden Not Working With HTML5 in CSS

Save

Hypertext markup language, or HTML, and Cascading Style Sheets, or CSS, are both languages used by Web designers to create attractive and functional websites. The HTML code defines the physical sections and content within a website, such as text, links and div blocks. The CSS defines the style and layout properties for the website content, such as link color, text style and content position. The "overflow:hidden" property defines the way a specific block of content displays on your website.

About

  • Website designers use the overflow:hidden property when working with HTML div blocks. When the content within a fixed-sized div block extends beyond the width or height of the block, this content still displays by default. If you assign the overflow:hidden property to the block, any content that overflows the borders of the div block becomes hidden within the block. The block also does not display scroll bars to allow you to scroll to see the hidden content.

Usage

  • The overflow:hidden property allows you to design floating div blocks without the block content overlapping other blocks or website structures. This allows developers to add content within the block, such as additional text or keywords, aimed at search engines or other online applications, rather than visitors. It also allows you to place hidden counters, site trackers or applications on your page without making them visible to the website readers.

Troubleshooting

  • If the overflow:hidden property is not working correctly, ensure that all elements within your HTML code are correct. View the page in different browsers to determine if the issue is browser-related. Though overflow:hidden is supported by all major browsers, some browsers, such as Internet Explorer, have issues displaying the code when the position of the content is absolute. This causes the overflow content to display outside of the box and ignore the hidden property.

Solution

  • If the problem persists, even when you attempt to view it in different browsers, this indicates an issue with your HTML and CSS coding. The proper code for this property is “overflow:hidden;” with no spaces between the colon and the words. If the issue only displays in certain browsers, add the “position: relative;” line to the coding block. The relative property in this code will allow the website to recognize the hidden property and hide the additional content as it should.

References

Promoted By Zergnet

Comments

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!