Question

Not the most self explanatory title I’ve ever authored.

What I’m trying to do (see this fiddle) is for the text field and button to remain positioned right next to eachother (no margins), with the button to the right, and thetext field covering 100% of the remaining width of the container that the button isn’t occupying. The relationship between the two should remain even if the containing element is resized.

Browser requirements: IE9+, Firefox, Webkit

Answer 1

Check out this little demo: little link. The code is pretty-self explaining, but here’s the basic idea:

<div class = "container">
    <div class = "cell">
        <input type="text" placeholder="Glee's awesome!" />
    </div>
    <div class = "cell" style = "width: 1px"> <!--make sure it's only large enough to fit the button-->
        <button type="submit">Glee</button>
    </div>
</div>

CSS:

.container {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;   
}

Hope that helped!