Ui Semantic Menu Full Width

Question

I have an application with a simple menu that will contain 3 main elements. Title element, search entry element, and settings element. I define the menu like this:

<div class="ui menu">
  <div class="left header item">

  </div>
  <div class="item">
    <div class="ui icon input">
      <input placeholder="Search..." type="text">
      <i class="search link icon"></i>
    </div>
  </div>
  <div class="right">

  </div>
</div>

The problem is that I want the middle element to take up as much space as possible (i.e. from the first element to the last element). Is there a property that allows an element to take up as much space as possible.

Answer 1

Saomething like this should work:

<div class="ui menu stackable">
    <div class="ui three column stackable grid container"  style="margin:0;">
        <a href="#" class="item three wide column">
            Home
        </a>
        <div class="ui search item ten wide column">
            <div class="ui icon input">
                <input class="prompt" type="text">
                <i class="search link icon"></i>
            </div>
            <div class="results"></div>
        </div>
        <div class="ui dropdown search item three wide column">
            <input type="hidden" value="en">
            <div class="default text">Something</div>
            <i class="dropdown icon"></i>
            <div class="menu">
                <div class="item" data-value="1"><i class="en flag"></i>item 1</div>
                <div class="item" data-value="2"><i class="en flag"></i>item 2</div>
                <div class="item" data-value="3"><i class="en flag"></i>item 3</div>
            </div>
        </div>
    </div>
</div>

Jsfiddle demo