Theme-ing a Search Form
When themeing a Search form there is often the challenge of having the search field expand to fill the space but not collide or get covered by the search button.
[[{"type":"media","view_mode":"media_original","fid":"42","attributes":{"alt":"","class":"media-image","typeof":"foaf:Image"}}]]
The trick is to make them act like table cells.
HTML
<div class="faux-table">
<div class="faux-row">
<div class="faux-cell search-field">
Search form field goes here
</div> <!-- /faux-cell -->
<div class="faux-cell search-submit">
Search from submit button goes here
</div><!-- /faux-cell -->
</div> <!-- /faux-row -->
</div><!-- / faux-table -->
CSS
<style>
.faux-table {
display: table;
width: 100%;
}
.faux-row {
display: table-row;
width: 100%;
}
.faux-cell {
display: table-cell;
}
.search-field {
width: 100%;
}
.search-submit {
width: 95px;
}
</style>