CSS 3 columns - First two fixed width, third remaining width - html

Question

I have 3 columns. left, middle and right.
left and middle are fixed-width, right should fill the remaining space.
How can I accomplish this?
Current HTML
<div id="menu">
<div id="left">
</div>
<div id="middle">
</div>
<div id="right">
</div>
</div>
LESS
#menu {
width: 100%;
#left {
width: 20%;
float: left;
}
#middle {
width: 300px;
float: left;
}
#right {
overflow-x: hidden;
float: right;
}
}

Answer 1

#menu {
width: 100%;
#left {
width: 20%;
float: left;
}
#middle {
width: 300px;
float: left;
}
#right {
width: -webkit-calc(100% - 20% - 300px);
width: -moz-calc(100% - 20% - 300px);
width: -o-calc(100% - 20% - 300px);
width: calc(100% - 20% - 300px);
float: right;
}
}
You must know that calc is still an experimental technology, I suggest you to use javascript instead if you are looking for browser compatibility.

Answer 2

Here is a fiddle with it all working.
It's "small-screen-first" so - if you aren't into that... then you can just delete the #media rule.
It looks like all you really need, is a width auto - and to make sure it's not floated.
HTML
<aside class="container left"><h2>Left</h2></aside>
<section class="container main-content"><h2>Main content</h2></section>
<aside class="container right">
<h2>Right</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et beatae quam quibusdam dolor dolorum vero harum commodi vel quidem quasi sed dolores iusto is</p>
</aside>
CSS
* {
box-sizing: border-box;
}
.container {
width: 100%;
float: left;
}
#media (min-width: 800px) {
.left {
width: 20%;
}
.main-content {
width: 400px;
}
.right {
width: auto;
float: none;
}
}

Answer 3

I think
#right{
width:auto;
float:right;
overflow-x: hidden;
}
has to work.

Answer 4

#middle {
width: 300px;
float: left;
position: relative; /* Show above #right */
}
#right {
width: 80%;
margin-left: -300px; /* equal to width of #middle in px */
padding-left: 300px; /* equal to width of #middle in px */
-moz-box-sizing: border-box;
box-sizing: border-box;
overflow-x: hidden;
float: right;
}