Search code examples
htmlcsswidthcss-float

css automatically expand floating element (unknown widths)

My horizontal navigation bar looks like this:


| MENU-ITEM 1 | MENU-ITEM-2 | MENU-ITEM 3 | SEARCH FIELD              |

The menu-items have equal width, but since the website is cms-driven, the count of items and therefore the width of the menu-item-list will change.

I'm looking for a CSS solution for automatically stretching the search-field on the right to use 100% of the remaining space inside the navigation bar. The navigation-bar's total width is static (about 950px).

html is something like this, but maybe I need wrappers anyway:

<div id="nav">
   <ul id="nav-items">
      <li class="nav-item">MENU-ITEM 1</li>
      <li class="nav-item">MENU-ITEM 1</li>
      <li class="nav-item">MENU-ITEM 1</li>
   </ul>
   <div id="search-cont">
      <input id="search">
   </div>
</div>
Solution

  • Here is a fiddle with the basics: http://jsfiddle.net/Qg2ag/

    The idea is:

    1. The wrapper of an input field must have display:block and overflow:hidden.
    2. The menu near it must have the float:left and the items in it must be inline or inline-block.

    So, the floated block eats it's width from the block with an overflow, so you can set width: 100% in it safely. And I've added padding-right: 6px to the input's wrapper so there is no need in ajusting it's width or using other box model. Of course the size of this padding can vary if you'd change the input's style.