title: Floating elements not working when using px & %
body: <p>I'm trying to achieve a simple structure, but i'm struggling with the concept of this.</p>
  
  <p>I have an <code>aside</code> that has a fixed width of 255px. I have a <code>main</code> that i want to occupy 100% of the remaining width (after the 255px from the <code>aside</code>). The website doesn't have a containing width, this is designed to fill the entire screen space available. Is anyone able to help, here is <a href="http://jsfiddle.net/andyjh07/tooqderr/" rel="nofollow">a jsFiddle</a>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;aside&gt;
      &lt;p&gt;Text&lt;/p&gt;
  &lt;/aside&gt;
  &lt;main&gt;
      &lt;p&gt;Main Text&lt;/p&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body { margin: 0; padding: 0; }
  aside { width: 255px; float: left; background: red; }
  main { width: 100%; float: left; background: blue; }
  </code></pre>
  
  <p>I'm sure it's simple, and i'm sure im approaching this the wrong way but any help would be appreciated!</p>