title: How to disable jumping to next line in div with float: left?
body: <p>I have a problem as i've described in title. 
  I've got menu and I use inside it float:left for divs.  Menu box contains search box and when i resize page i don't want search box to jump to next line when width of site is too little, i want to be "cut/hidden" this part of search box. </p>
  
  <p>I've tried with inline-block, position:absolute, overflow:hidden and nothing works as i want to.</p>
  
  <p>Sample (i want this green boxes to stay in first line and i don't want to have horizontal scroll bar because of hidden elements, also i want "content" to be able to resize even we pass size limit which guarantees to show every menu item ):</p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
          &lt;html&gt;
          &lt;head&gt;
          &lt;meta charset=utf-8 /&gt;
  
          &lt;style&gt;
            html, body {width:100%}
            #header { width: 100%; height: 50px; }
            #menu_box { width: 100%; height: 50px; background: red; }
            .menu_item { background: green; width: 100px; height: 25px; float: left; }
            #content{ width: 100%; height: 100%; text-align: center; }
          &lt;/style&gt;
          &lt;/head&gt;
          &lt;body&gt;
          &lt;div id="header"&gt;
            &lt;div id="menu_box"&gt; 
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
              &lt;div class="menu_item"&gt;sd&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="content"&gt;
          text which align is center
          &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>
  
  <p>EDIT2, now you should understand what I mean, in this case it doesn't work properly, overflow:hidden do nothing (it was first thing which i've tried). Look at content. To avoid questions: yes, i need to use css tables.</p>
  
  <pre><code>        &lt;!DOCTYPE html&gt;
          &lt;html&gt;
          &lt;head&gt;
          &lt;meta charset=utf-8 /&gt;
  
          &lt;style&gt;
            html, body {width:100%}
            #header { display: table-cell; width: 100%; height: 50px; }
            #menu_box { width: 800px; height: 50px; background: red; overflow: hidden; }
            .menu_item { background: green; width: 100px; height: 25px; float: left;}
            #content{ display:table-cell; width: 100%; height: 100%; text-align: center; }
  
            .row { display: table-row; width: 100%; }
            #table {
              width: 100%;
              height: 100%;
              border-collapse: collapse;
          }
          &lt;/style&gt;
          &lt;/head&gt;
          &lt;body&gt;
          &lt;div id="table"&gt;
              &lt;div class="row"&gt;
                  &lt;div id="header"&gt;
                    &lt;div id="menu_box"&gt; 
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                      &lt;div class="menu_item"&gt;sd&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                  &lt;div id="content"&gt;
                  LOOK AT THIS (when width of menu_box is constant and when isn't)&lt;br&gt;Try to resize this site
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>