Fixed right sidebar collapsing on responsive site - html

Question

I have a 2 column site: the left column is fluid and the right column is fixed. When I scale the browser in to check to see how the site responds the right column seems to collapse below the left column. I do not want this right column collapsing. I would like for the left main column to contract fluidly as the site is scaled in.
Here is the basics of my code: http://jsfiddle.net/kGkRD/
<section class="main">
Left
</section>
<aside class="sidebar">
Right
</aside>
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
section.main {
float: left;
max-width: 300px;
width: 100%;
background-color: red;
}
aside.sidebar {
float: right;
width: 200px;
background-color: blue;
}

Answer 1

<aside class="sidebar">
Hello World
</aside>
<section class="main">
Hello World123
</section>
CSS
#media (max-width:500px){
section.main {
//display:block;
float:right;
}
}
Fiddle
EDIT: Please use the updated css. try both using display:block and float:right.

Answer 2

Put your right floated element first, remove the float: left; and width: 100%; from the section.main and add overflow: hidden;: http://jsfiddle.net/mdares/kGkRD/1/
HTML:
<aside class="sidebar">
Hello World
</aside>
<section class="main">
Hello World
</section>
CSS:
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
section.main {
max-width: 300px;
background-color: red;
overflow: hidden;
}
aside.sidebar {
float: right;
width: 200px;
background-color: blue;
}
Update: Do I understand correctly and you are looking for this: http://jsfiddle.net/mdares/kGkRD/4/
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
section.main {
max-width: 300px;
width: 100%;
background-color: red;
overflow: hidden;
float: left;
}
aside.sidebar {
float: left;
width: 200px;
background-color: blue;
}
If so you were just missing your overflow: hidden;
UPDATE 2: To address your comment try this: http://jsfiddle.net/mdares/kGkRD/5/
CSS:
body {
max-width: 500px;
width: 100%;
margin: 0 auto;
}
#container {
position: relative;
width: 100%;
}
section.main {
max-width: 300px;
width: 100%;
background-color: red;
overflow: hidden;
float: left;
}
aside.sidebar {
width: 200px;
background-color: blue;
position: absolute;
right: 0;
}
#media screen and (max-width: 350px) {
aside.sidebar {
position: static;
float: left;
}
}
HTML:
<div id="container">
<section class="main">
Hello World
</section>
<aside class="sidebar">
Hello World
</aside>
</div>