title: text inside table jups to new line when i resize window
body: <p>I have table with 4 columns and 1 row width set to 100% in css.</p>
  
  <p>When i re-size window from screen to smaller text from last cell jumps to new line. and if i change zoom in browser "Ctrl+mouse wheel up" when text reaches edge of window it jumps to next line.</p>
  
  <p>I noticed if i set table width to 1000px and resize window text stays on same line just fine.</p>
  
  <p>But i have to have table 100% width as i use it as header with background that stretch over page. I wonder is there CSS code to stop text jumping on window resize?</p>
  
  <pre><code>&lt;table width="100%" height="48px" border="0" cellpadding="0" cellspacing="0"&gt;
      &lt;tr&gt;
          &lt;td width="auto" style="background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png); background-repeat: repeat-x;"&gt;&amp;nbsp;&lt;/td&gt;
          &lt;td width="1000px" style="background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png); padding-top: 2px; overflow:hidden;"&gt;
  
                      &lt;div class="inline login_box1" style="margin-left:112px;"&gt;
                          &lt;input type="text" name="user_login" value="Username" /&gt;
                      &lt;/div&gt;
                      &lt;div class="inline login_box2" style="margin-left:26px;"&gt;
                          &lt;input type="text" name="user_password_text" ialue="Password" /&gt;
  
  
                      &lt;/div&gt;
                      &lt;div class="inline login_box1" style="margin-left:50px;"&gt;
                          &lt;input type="text" name="employer_login" value="Username"  /&gt;
                      &lt;/div&gt;
                      &lt;div class="inline login_box2" style="margin-left:26px;"&gt;
                          &lt;input type="text" name="employer_password_text"  value="Password"  /&gt;
  
  
                      &lt;/div&gt;
          &lt;/td&gt;
  
          &lt;td width="auto" style="background-image: url(http://cdn.sstatic.net/webmasters/img/bg-header.png); background-repeat: repeat-x;"&gt;&amp;nbsp;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Here is broken thing <a href="http://jsfiddle.net/LzTfF/2" rel="nofollow">http://jsfiddle.net/LzTfF/2</a> when you Ctrl + mouse wheel up you zoom out and see all boxes on same line when you Ctrl + mouse wheel down you zoom it and see boxes jump to next line </p>
  
  <p>Now this one <a href="http://jsfiddle.net/9eYZx/1" rel="nofollow">http://jsfiddle.net/9eYZx/1</a> i changed in first line table width to 1000px instead of 100% and now it works fine when you zoom - input boxes go behind window instead of jumping down to next line. however i need blue background to be stretched 100% over the page horizontally and setting fixed width does not do it. If i say set width to 2000px it will create horizontal scroll bar in browser window.</p>