Overflow:hidden full width div doesnt work

Question

I have a simple problem with a menu, its a 2 part menu : on the left, a traditional UL. On the right, a link contained in a div. The right div has fixed width. The left div must take all remaining space.

I tried the overflow:hidden technique, to no avail https://coderwall.com/p/0ph8lg/overflow-hidden-trick-to-fill-remaining-width

https://jsfiddle.net/3gfqyux4/

.container {
    width:800px;
    height:50px;
}

.left-menu {
    background-color:red;
    width:auto;
    height:50px;
    overflow:hidden;
}
.left-menu ul li {
    display:inline;
}
.right-menu {
    background-color:blue;
    float:right;
    width:100px;
    height:50px;
}

Answer 1

Use calc

.container {
   width:800px;
   height:50px;
}

.left-menu {
    background-color:red;
    width:150px;
    height:50px;
    float:left;
}

.left-menu ul li {
    display:inline;
 }

.right-menu {
     background-color:blue;
     width:calc(100% - 150px);
     height:50px;
 }

Updated your fiddle: https://jsfiddle.net/3gfqyux4/3/

Answer 2

I assume you mean your "right" div has a fixed width (as indicated in your code) and that the left div should take up the remaining width.

flexbox can do that.

 .container { width: 80%; height: 50px; display: flex; } .left-menu { background-color: red; flex: 1 0 auto; } .left-menu ul li { display: inline; } .right-menu { background: green; flex: 0 1 100px; } 

 <div class="container"> <div class="left-menu"> <ul> <li>menu</li> <li>menu</li> <li>menu</li> </ul> </div> <div class="right-menu"> <a href="xyz.com"> xyz.com </a> </div> </div> 

JSfiddle Demo

CSS-Tricks: Complete Guide

Answer 3

if you don't change the order: remember display:inline-block ;

.container {
    width:800px;
    height:50px;
}

.left-menu {
    background-color:red;
    width:calc(100% - 100px);
    height:50px;
    /*overflow:hidden;*/
    display:inline-block;

}
.left-menu ul li {
    display:inline;
}
.right-menu {
    background-color:blue;
    float:right;
    width:100px;
    height:50px;
    display:inline-block;
}

Answer 4

Change an order of this two lists ;)

<div class="container">
<div class="right-menu">
    <a href="xyz.com">
        xyz.com
    </a>
</div>    
<div class="left-menu">
    <ul>
        <li>menu</li>
         <li>menu</li>
         <li>menu</li>
    </ul>
</div>

https://jsfiddle.net/3gfqyux4/2/