CODEWITHSUNDEEP
htmlcssoverflow
Victor2748
Victor2748

Reputation: 4199

CSS3 - overflow:hidden fixes the height?

I have a UL with some items in it:

<ul>
    <li><a href="#"><img alt="FaceBook" src="images/facebook.png" /></a></li>
    <li><a href="#"><img alt="Twitter" src="images/twitter.png" /></a></li>
</ul>

It appears on the webpage fine, but the true height of the UL is 0 pixels.

enter image description here

ONLY when I add overflow:hidden parameter to the UL, the height fixes:

enter image description here

I always thought that overflow:hidden only prevents items from going outside of the containter, but do not actually affect the containter's dimentions. While the default height should automatically be high enough to fit in all the items.

Question: Why doesn't the UL have the auto height by default, and why does overflow:hidden affect it?

Upvotes: 0

Views: 45

Answers (1)

piers
piers

Reputation: 181

By default <ul> takes up as much space as its child elements (see http://jsfiddle.net/). If you are experiencing something other than that you have applied some CSS to it that breaks the default behaviour.

If you float your <li> tags they would not take up any space anymore, which makes your <ul> "disappear". It is still true that it takes up as much space as its children, but now the children don't take up any space anymore since they are floated. Setting overflow: hidden; to your <ul> is a fix for that.

Upvotes: 2

Related Questions