How to disable jumping to next line in div with float: left?

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.

I've tried with inline-block, position:absolute, overflow:hidden and nothing works as i want to.

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

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset=utf-8 />

        <style>
          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; }
        </style>
        </head>
        <body>
        <div id="header">
          <div id="menu_box"> 
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
          </div>
        </div>

        <div id="content">
        text which align is center
        </div>
        </body>
        </html>

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.

        <!DOCTYPE html>
        <html>
        <head>
        <meta charset=utf-8 />

        <style>
          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;
        }
        </style>
        </head>
        <body>
        <div id="table">
            <div class="row">
                <div id="header">
                  <div id="menu_box"> 
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                    <div class="menu_item">sd</div>
                  </div>
                </div>
            </div>

            <div class="row">
                <div id="content">
                LOOK AT THIS (when width of menu_box is constant and when isn't)<br>Try to resize this site
                </div>
            </div>
        </div>
        </body>
        </html>

Solution

Resize width on resize of window. Here's the jQuery way,

$(window).resize(function(){
   // Change your search box width here relative to window's width
})

Here the css way,

<div style='width:800px'>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
            <div class="menu_item">sd</div>
          </div>

i.e. wrap it it a div and fix its width.