Alternative for [OVERFLOW:HIDDEN]

css, html

Solution

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

Problem

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?

Original source