Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does overflow: hidden do for ul tag?

I'm creating a multiple column list using the directions from this article:

http://csswizardry.com/2010/02/mutiple-column-lists-using-one-ul/

In a nutshell, it says to do something along the lines of this:

HTML:

<div class='block'>
  <ul>
    <li>
      Item1
    </li>
    <li>
      Item2
    </li>
    <li>
      Item3
    </li>
  </ul>
</div>

CSS:

.block {
    border: 1px solid black;
    padding: 10px;
}
.block ul {
    width: 100%;
    overflow: hidden;
}
.block ul li {
    display: inline;
    float: left;
    width: 50%;
}

And it works wonderfully, but I was mind-boggled at the overflow:hidden CSS declaration.

Without it, my outer div collapses like so:

http://jsfiddle.net/alininja/KQ9Nm/1/

When it's included, the outer div behaves exactly as how I would want it to be:

http://jsfiddle.net/alininja/KQ9Nm/2/

I'm wondering why overflow: hidden is triggering this behaviour. I would expect it to cutoff the inner li items instead of forcing the outer div to expand to the necessary height.

Thank you for looking!

like image 226
Zhao Li Avatar asked Oct 19 '12 22:10

Zhao Li


People also ask

What does overflow hidden does?

overflow:hidden prevents scrollbars from showing up, even when they're necessary. Explanation of your CSS: margin: 0 auto horizontally aligns the element at the center. overflow:hidden prevents scrollbars from appearing.

What is overflow in UL?

The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. Note: The overflow property only works for block elements with a specified height. Show demo ❯

How do I hide my UL tag?

The hidden attribute hides the <ul> element. You can specify either 'hidden' (without value) or 'hidden="hidden"'. Both are valid. A hidden <ul> element is not visible, but it maintains its position on the page.

What is the purpose of the hidden value in the overflow property?

The hidden value of the overflow property hides all the content that is exceeding the box area. This property should be handled with care because the content that this property hide is completely invisible to the user, however, it is best suited for displaying content that is dynamic in nature.


2 Answers

The overflow: hidden; is there to contain the floated lis. overflow: hidden; creates a new block formatting context - and that's what elements with their own block formatting contexts do - they contain floats.

I'll point to another answer here on StackOverflow that explains this a little bit more: Adding CSS border changes positioning in HTML5 webpage

like image 160
João Paulo Macedo Avatar answered Sep 28 '22 04:09

João Paulo Macedo


Anything inside that might be floating does not get clipped unless you have the overflow set to either hidden, scroll or auto. The real magic of the method is that without having given the element a set height, when you set overflow to hidden it takes on the height of the inner elements.

Here the div would not wrap around the img because the img is floating.

<div><img style="float:left;height:100px" /></div>

Here the div will actualize the height of the img now that is has a proper overflow.

<div style="overflow:hidden"><img style="float:left;height:100px" /></div>

If you were to give it a set height and then set overflow hidden it would chop anything that would otherwise have overflowed outwards.

<div style="overflow:hidden;height:50px"><img style="float:left;height:100px" /></div>

Note that in a lot of cases these techniques can be used to avoid clear:both type extra markup.

like image 40
TheZ Avatar answered Sep 28 '22 05:09

TheZ