For a mobile search, I wanted an input field next to a button. I wanted the button to fall to its natural width, and I wanted the input field to be 100% of the remaining width on the line. It’s easy to do with fixed widths, but for fluid-width layouts, it’s harder to do with CSS than you might think.
The key is to apply the magical “overflow” property.
A block that contains a floated element, ordinarily forms an “L” shape, flowing next to and then below the floated element. But when you apply any “overflow” property, you constrain that block so that it sits next to (and never below) the floated element. The block remains a rectangle, not an “L” shape.
Using this, you can put an input field next to a button, let it take up the entire “rest of” the column, and not worry about about it jumping down below the float on the next line.
Here’s the code to achieve the layout. Styles are inline below, but we all know we should put them into CSS files, right?
<form action="search.php" method="get"> <input type="submit" name="search" value="Go" style="float: right" /> <div style="overflow: hidden; padding-right: .5em;"> <input type="text" name="term" style="width: 100%;" /> </div> </form>