title: Table beside a floating image
body: <p>I'm trying to accomplish something that I thought would be simple, but it seems that when it comes to CSS, you never know!</p>
  
  <p>I have an image float to the left. Beside it, I have a title and under that title, but still besides the image, I want to display a table taking all the remaining width. In IE and Chrome, the table ends up under my image while in Firefox, it takes more that 100% (an horizontal scroll bar is displayed). Firefox gives a result closer to what I want, but I don't want the scrollbar. </p>
  
  <p>Here some code that I tried to make work using w3school "try it" editor (<a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_float" rel="nofollow noreferrer">http://www.w3schools.com/css/tryit.asp?filename=trycss_float</a>)</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              h1{
                  font-size:1em;
              }
              img 
              {
                  float:left;
              }
              .field{
                  width:100%
              }    
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;img src="logocss.gif" width="95" height="84" /&gt;
          &lt;div class="content"&gt;
              &lt;h1&gt;this is the title&lt;/h1&gt;
              &lt;form&gt;
                  &lt;table width="100%"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;&lt;input type="text" class="field"/&gt;&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/body&gt;    
  &lt;/html&gt;
  </code></pre>
  
  <p>I know the structure is too complex for that simple form, but forms are automatically generated by a PHP script so I'd like to keep it that way.</p>