I'm trying to achieve a simple structure, but i'm struggling with the concept of this.

I have an `aside` that has a fixed width of 255px. I have a `main` that i want to occupy 100% of the remaining width (after the 255px from the `aside`). 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 jsFiddle](http://jsfiddle.net/andyjh07/tooqderr/).

HTML:

```
<aside>
    <p>Text</p>
</aside>
<main>
    <p>Main Text</p>
</main>

```

CSS:

```
body { margin: 0; padding: 0; }
aside { width: 255px; float: left; background: red; }
main { width: 100%; float: left; background: blue; }

```

I'm sure it's simple, and i'm sure im approaching this the wrong way but any help would be appreciated!