Michal Posted September 7, 2017 Share Posted September 7, 2017 Hi! While preparing a navigation bar I bumped into overflow: hidden I know how it works generally, but I can't understand the meaning in the below example, can someone help and explain? Whey it's required here? <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: #111; } </style> </head> <body> <ul> <li><a class="active" href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> Link to comment Share on other sites More sharing options...
Michal Posted September 7, 2017 Author Share Posted September 7, 2017 (edited) the source taken from: https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black Edited September 7, 2017 by Michal Link to comment Share on other sites More sharing options...
dsonesuk Posted September 7, 2017 Share Posted September 7, 2017 The parent ul loses it ability to identify the boundary of the floated child elements, so its height becomes zero, so you lose the background colour of #333 showing, overflow: hidden returns that ability, the background now shows, all is good within the world...well this part anyway, not sure about the rest. Link to comment Share on other sites More sharing options...
Michal Posted September 7, 2017 Author Share Posted September 7, 2017 Thanks Dsonesuk, that explains the case, however I must say it's still little bit confusing. It will come with experience (I hope). Topic closed. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 7, 2017 Share Posted September 7, 2017 True, I would have thought by now! That detection of boundary of child floated elements would have been made permanent, so there would be no need for this fix, I have not come across a case where this would be required. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now