Overflow, float ,height Mess

Question

I am using a Navigation design from the site - CSSDECK.

I have done some modification and this is my code.

DOUBTS:

Why #siteNav and #siteNav ul not wrapping around lis. I have used height:auto in #siteNav and #siteNav ul. What I know is auto means browser will decide the height accordingly. But this isn't happening. WHY?
If I do overflow:auto or hidden in any of #siteNav or #siteNav ul. Then that block wrap itself around the lis. Why using overflow doing this?

score 2 · Accepted Answer · edited May 23 '17 at 12:04

2

This is because your lis are floated. When you don't have overflow: hidden;, then the lis are in a different context than the ul, so the ul doesn't wrap around them.

overflow: hidden; is a generic, known fix for containers to resize to fit their floated contents, but there are other methods -- for an extensive reference, see this.

edited May 23 '17 at 12:04

Community

1
1

answered Sep 28 '12 at 16:23

Chris

26,544
5
58
71

yeah! I am also feeling like the same that's why I have title it `float mess`. But as you said `li `s are in a different context. Can you explain or share any resource which simply explain this context. – Abhishek Gupta Sep 28 '12 at 16:28
@knoxxs The context is just the "floating context." Unfloated elements kind of "don't see" floated elements. For more explanation on the several methods, see my updated answer. – Chris Sep 28 '12 at 16:30

GajendraSinghParihar · Answer 2 · 2012-09-28T16:32:13.797

0

just apply overflow: hidden; to your #siteNav ul

 #siteNav ul {
overflow: hidden;
}

Because you establish a new Block Formatting Context when using overflow with anything ofther then visible (link to the w3.org specs). by- ChristopheD

read this

edited Sep 28 '12 at 16:32

answered Sep 28 '12 at 16:24

GajendraSinghParihar

9,051
11
36
64

2

I think the OP already knows that `overflow: hidden;` **fixes** the issue, he/she would rather to find out **why**. – Chris Sep 28 '12 at 16:27

score 0 · Answer 3 · answered Sep 28 '12 at 16:32

This is happening because lis are floated. Any wrapper containing floated elements will not wrap the contents unless overflow: hidden is applied to the wrapper.This is a common browser issue with floated elements. Also, overflow:hidden does not fix this issue in all browsers. Search for "clearfix" to see cross browser fix for this issue.

BTW, you don't need the height:auto there, block elements by default have width and height auto. If there was no floated element inside, then you would see the expected behavior.

Overflow, float ,height Mess

3 Answers3