CODEWITHSUNDEEP
htmlcssheightoverflow
Abhishek Gupta
Abhishek Gupta

Reputation: 6615

Overflow, float ,height Mess

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

I have done some modification and this is my code.

DOUBTS:

  1. 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?
  2. 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?

Upvotes: 0

Views: 176

Answers (3)

Chris
Chris

Reputation: 26918

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.

Upvotes: 2

3coins
3coins

Reputation: 1342

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.

Upvotes: 0

GajendraSinghParihar
GajendraSinghParihar

Reputation: 9131

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

Upvotes: 0

Related Questions