/    Sign up×
Community /Pin to ProfileBookmark

Why is overflow: hidden; used here?? If i delete tag navigation bar disappeared?

Copy linkTweet thisAlerts:
Feb 05.2019

Why is overflow: hidden; used here?? If i delete tag navigation bar disappeared?
https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumFeb 05.2019 — Seems to be a mystery of float layout. I recommend using flexlayout instead as it's more clear and state of the art:
ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
/*overflow: hidden;*/
background-color: #333;
}

li {
/*float: left; */
}
Copy linkTweet thisAlerts:
@NogDogFeb 05.2019 — Yeah, I remember using that hack before -- though I think I used overflow: auto -- so that the element containing the floating elements expanded to fit them, instead of essentially ignoring them.
Copy linkTweet thisAlerts:
@SempervivumFeb 05.2019 — Now I understand: When floating, the parent element doesn't adjust to the size of the content and this trick works around that. Thanks for this hint.
Copy linkTweet thisAlerts:
@shadewFeb 06.2019 — I tried deleting the overflow: hidden; and added a border around the list items. You can see this at the following link: https://www.w3schools.com/code/tryit.asp?filename=FZWG6IF2JOGV

You can see the borders and hover over to see that the list items are still there and the hover function still works. For some reason the overflow: hidden; or overflow: auto commands are the only way to to get the unordered list background-color to show up.

You can add this background-color to the li a {background-color: #333;} and the buttons are visible again without a border. Unless this overflow: hidden; can be explained I would guess that wrapping the entire list in a div and giving that div dimensions/background-color would be the correct way of display the menu bar.
Copy linkTweet thisAlerts:
@NogDogFeb 06.2019 — The reason the overflow is needed is that that element is containing elements that are set to display: float, and for whatever reason the containing element no longer considers those floated elements when calculating its size. By adding the overflow setting, it now accounts for them. I have no idea what the rationale is for the rendering to work that way, just that it works. ?
Copy linkTweet thisAlerts:
@shadewFeb 06.2019 — @NogDog#1600748 This is a fantastic and concise explanation. Thank you.
Copy linkTweet thisAlerts:
@SempervivumFeb 06.2019 — @shadew#1600744 Please don't ignore my recommendation for using flex layout. It will guard against further trouble by use of float layout which is outdated while flex is state of the art.
Copy linkTweet thisAlerts:
@LearnTheNewFeb 06.2019 — he overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.

The overflow property has the following values:

visible - Default. The overflow is not clipped. The content renders outside the element's box

hidden - The overflow is clipped, and the rest of the content will be invisible

scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content

auto - Similar to scroll, but it adds scrollbars only when necessary

overflow: hidden

With the hidden value, the overflow is clipped, and the rest of the content is hidden

Regarding - @LearnTheNew
Copy linkTweet thisAlerts:
@shadewFeb 06.2019 — @Sempervivum#1600758 You are correct, thank you for addressing this. I got caught up in finding the "correct" way to fix this issue with float layout, when using flex (or grids) would certainly be the modern method.
×

Success!

Help @Nebojsa spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.6,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...