fluid width content area

I’m trying to allow my sidebar width to be adjusted, and have the content area auto adjust in relation to whatever the width of the sidebar is.
EX: sidebar is 20% content would be 75%
Sidebar is 25% content would auto adjust to 70%

#primary {
    float: left;
    margin: 10px auto 0 0;
    width: 70%;
    padding-bottom: 30px;
}
#content {
    margin: 10px auto 0 0;
    padding-left: 5px;
    width: 100%
}
#main .widget-area {
    margin-top: 20px;
    float: right;
    overflow: hidden;
    width:20%
}

Primary is the area where my content is, content is the post content.
If I set the primary to auto, it just takes up the entire width of the page and shoves my sidebar to the bottom of the page.