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;
}
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>
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments