Two column responsive website issue - html

Question

I am trying to convert an existing site into responsive however there is one thing I'm struggling with here:
http://www.brandonsuffolk.com
When you resize the window I want the right column to squash the left one, however at the moment it drops underneath (however once the screen hits the other left div it will change).
When I do it with single divs it works, however as soon as I add a new div inside it, it won't work properly.
Here is the relevant CSS:
.MainOuter {
float: left;
width: 100%;
}
.MainWrapper {
max-width: 980px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 0px;
padding-left: 10px;
}
.ColumnRight {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 20px;
float: right;
width: 290px;
padding: 0px;;
}
.ColumnLeft {
margin-top: 20px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
float: left;
width: auto;
max-width: 670px;
padding: 0px;
}

Answer 1

I'm afraid you're fighting the normal process of responsiveness. responsiveness is supposed to do just what it's doing. If you don't want it to drop under, find the #media for this element and change it to:
#media (min-width:0px) {
width:50%;
}
This may help

Answer 2

Assuming I understood, and you want the right-side column to maintain the fixed width, you'll need to use position:absolute with a left and right value, and width set to auto. This gives you a fixed side and a side that takes the rest of the screen.
Wanting it to only apply after they touch though, is where you'll have to use a media query. Set the media query to apply only when the screen is lower than 1000px, which will tell the left column to change there and become flexible.
EDIT
Try adding this CSS to your site's CSS file, at the end. Additionally I've updated the Fiddle to show how that it works. You might have to tweak the numbers a little, but it'll do what you need.
Example Fiddle
#media screen and (max-width: 1000px) {
.ColumnLeft {
position: absolute;
left: 20px;
right: 320px;
width:auto;
}
}

Answer 3

May this is what you mean with "squash" ?
http://jsfiddle.net/7QVVz/
CSS
.wrap {
display: table;
width: 100%;
}
.left {
display: table-cell;
border: 1px solid green;
width: 350px;
max-width: 350px;
}
.right {
display: table-cell;
border: 1px solid red;
}
.right > .text {
width: 200px;
float: right;
border: 1px solid yellow;
}
HTML
<div class="wrap">
<div class="left">LEFT</div>
<div class="right">
<div class="text">RIGHT TEXT</div>
</div>
</div>