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.


The trick is to make them act like table cells.


<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 -->


.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;