Can someone tell me what is going on with this overflow line?

1

Hello everyone. I can’t figure something out with this code: https://codepen.io/bahadrm/pen/zwKVpG

When I delete the “overflow: hidden;” line from the css, background color of the div disappears. I tried to learn more about the behavior of overflow property but things I found didn’t cover this particular example. I can use the code as it is, but I really want to understand what I am missing. Can someone explain this?

Thanks in advance.

2

I don’t know why but if you inspect the page you can see that your div has height: 0. After you set the height the background-color will appear.

1 Like
3

Your navbar disappear when you remove {overflow: hidden;} because you didn’t set a height to the navbar;
If you remove the overflow property and give it a height of 46px your navbar would appear on the screen. (because your anchor element is 46px and I am assumig that you want that your li height to be 100% of the navbar height)

.topnav {
height: 46px;
background-color: #333;
}

1 Like
4

Thanks for the replies guys.

However what I really want is not to find a workaround but to understand the behavior of the code.
With the help of your replies, now I can better formulate my question/problem.

As far as I know, divs gets resized to accommodate the content so you don’t always have to give it a size. So why is the height of div is set to 0 when there is content in it? How/Why does the overflow property set the height of the div?

5

Hello Bahadrm,

I am no expert but I was playing with your example on codepen.
Your question is very good I agree you definitelly should not set height in this case.

  1. Overflow property doesnt set height of the div. It simple shows what is overflowed (in this case everything is outside topnav div because its height is 0.

Look here for more explanation of what is overflow> https://developer.mozilla.org/en/docs/Web/CSS/overflow?v=example

  1. Remove float: left; from “.topnav a” class definition and your yours links will have correct height
    Why ? I am not sure but it has something to do with float and what it does, how floated link behave. Look for more detailed explanation here:

https://developer.mozilla.org/en/docs/Web/CSS/float?v=example and try to find more resources on float topic
https://css-tricks.com/all-about-floats/

Also try to change display to inline to have links arranged next to each other horizontally. (you still need to remove float: left)

Hope this helps a bit.

2 Likes
6

Whenever you use floats, they need to be cleared.Clearing floats is necessary so that its parent element takes appropriate height.
In your case, your parent elements height is 0 because you’ve not cleared floats.To clear float you can use the code below :

.topnav {
background-color: #333;
}
.topnav:after {
clear:both;
content:’’;
display:table;
}

Popular CSS framework bootstrap uses ‘clearfix’ class to do so.You can read more about this to clear your doubts.

1 Like
7

Yes, clearfix does the trick.

I understand that if you don’t clear, the elements inside the div will float to the right/left of the div, leaving it without content, therefore the 0px height.

I still don’t understand exactly why overflow:hidden keeps content inside the div, but I guess the principle is similar to clear.

Thanks for all the replies, I feel like I learned a lot.

8

I found some article explaining that overflow: hidden is some other technique used as clearfix

If you mean it with css seriously, look into flex design, its now supported in all major browsers
and you can do flexible layout, that is impossible otherwise