title: No alternative for table layout?
body: <p>I do understand. Tables must be used only for tabular data, not for layout in any case. 
  I used to write code with lots of tables, but several years ago i've found ways to replace them with more appropriate structures in every situation. <strong>Except one.</strong></p>
  
  <pre><code>&lt;ul&gt;
  &lt;li&gt;We're up&lt;/li&gt;
  &lt;li&gt;all night&lt;/li&gt;
  &lt;li&gt;to get&lt;/li&gt;
  &lt;li&gt;lucky&lt;/li&gt;
  &lt;li class="last_one"&gt;&lt;input type="search" placeholder="I'm search"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Here's the fiddle:
  <a href="http://jsfiddle.net/4enMp/4/" rel="nofollow noreferrer">http://jsfiddle.net/4enMp/4/</a></p>
  
  <p>I'm trying to make a menu here. My requirements:</p>
  
  <ol>
  <li><p>The menu must fill all the page horizontally <strong>[menu width: 100%]</strong></p></li>
  <li><p>All the menu cells (except for the last one) should have random widths, depending on the widths of their contents <strong>[width of menu item = width of item's content].</strong> It means it should not be hardcoded.</p></li>
  <li><p>The last menu item (with search input) should stretch to fill all the remaining space. <strong>[last menu item fills all the space left].</strong></p></li>
  <li><p>The whole thing <strong>must support IE7+.</strong> It's silly. I know. But it is something I can do nothing about. Thankfully I don't have to bother with IE6.</p></li>
  </ol>
  
  <p>As I've illustrated in JS Fiddle, it's pretty easy to do that with tables (though I don't claim it's 100% right, it's consistent across browsers). </p>
  
  <p>I have not managed to meet these 4 requirements with unordered lists (see Fiddle above). I would greatly appreciate any thoughts of how to reach it with <strong>HTML and CSS only.</strong> </p>
  
  <p>Thanks a lot for your help!</p>
  
  <p>Edit: here's my desired menu design:
  <img src="https://i.stack.imgur.com/bZhv7.jpg" alt="Desired menu"></p>