CODEWITHSUNDEEP
htmlcsswidthcss-float
fishbone
fishbone

Reputation: 3249

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>

Upvotes: 2

Views: 4231

Answers (2)

drublic
drublic

Reputation: 993

Maybe it helps if you use display: inline; and float: left; on the li-elements. This will keep them in one line. You can style these tags now. If you're using a-tags inside the lis you may consider styling these instead of the lis.

The search-bar will then be displayed in one line with these elements but also remain at a width of 100%.

Check out this fiddle.

Upvotes: 0

kizu
kizu

Reputation: 43224

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.

Upvotes: 1

Related Questions