CODEWITHSUNDEEP
htmlcss
Ellis
Ellis

Reputation: 121

Alternative for [OVERFLOW:HIDDEN]

I am currently working in our system and I find it difficult to use overflow in my HTML.

Please take a look at my fiddle. and try to put 

overflow:hidden;

in

#nav-holder{
background: #333333;
padding-left: 30px;
padding-right: 30px;
}

http://jsfiddle.net/mjanthrax/L7vgnzvt/

You will notice that, after including overflow:hidden in the css, the navigation menu(hover) doesn't display.

How can I fix that?

Upvotes: 7

Views: 24938

Answers (1)

Gildas.Tambo
Gildas.Tambo

Reputation: 22643

You will need display: inline-block and set the width to 100%

inline-block

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)

Change

#nav-holder{
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
}

to

#nav-holder {
    background: #333333;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    clear: both;
    display: inline-block;
}

Jsfiddle demo

You then may want to add *{box-sizing: border-box} at the top pf you css

Full demo

Read more about box-sizing here

bonus

Upvotes: 14

Related Questions