Question

I am trying to create a menu where the text input field .search-form will expand to take up the rest of the available horizontal space within .container. I also have a .cart, .logo, and .menu which has a width based on their content.

Currently, I am able to get everything to work, except that the .search-btn is on a different line then .search-form and I do not know how to fix this. It is important that .search-btn and .search-form are contained by the same div as I will create a drop-down that appears containing potential search results. This drop-down will have to be the same width of .search-btn and .search-form.

jsFiddle: http://jsfiddle.net/bnJPE/1/

html:

<div class="container">

    <a href="#" class="cart">
        <img src="http://www.placehold.it/27x27">
    </a>

    <a href="#" class="logo">
        <img src="http://www.placehold.it/100x27">
    </a>

    <ul class="menu">
        <li class="item"><a class="link" href="#">
            Item 01
        </a> </li>
        <li class="item"><a class="link" href="#">
            Item 02
        </a> </li>
        <li class="item"><a class="link" href="#">
            Item 03
        </a> </li>
        <li class="item"><a class="link" href="#">
            Item 04
        </a> </li>
    </ul>

    <div class="search">
        <input class="search-form" type="text" value="varying width">
        <a href="search-btn"><img class="search-icon" src="http://www.placehold.it/20x20"></a>
        <div class="suggestions">
            Potential Results Goes Here
        </div>
    </div>

</div>

css:

.container{
    width: 100%;
    float:left;
    height:30px;
    background: yellow;
    padding: 0;
    margin: 0;
}

.logo{
    float:left;
}

.search{
    overflow: hidden;
    background:aqua;
}

    .search > .search-form {
        width: 100%;
    }

    .search > .search-btn {
        width: 27px;        
    }

    .suggestions {
        background: #98faf9;
        height: 50px;
    }

.menu {
    float: left;
}

    .menu > .item {
        display: inline;
        list-style-type: none;
    }

.cart{
    float:right;
}

Answer 1

For the .search, remove overflow: hidden as it’s not needed, and use float: right. For the .search-form remove the width: 100%, because this prevents the button to move to the right, or set it to the initial of auto

.search {
    background:aqua;
    float: right;
}

.search > .search-form {
}

Modified JSFiddle