css columns auto sizing issue

I have two css columns for my website they fit inside a main container, with a width of 75% that is centered. I want the right container to be at least 300px wide but to expand if there is room in the browser (my advertisement is 300px wide) and the left one to fill the rest of the space plus some space between them. This is the CSS I have so far,

#body_container{
    margin: 200px auto 0 auto;
    width:75%;
    }
#left_container{
    float: left;
    width: 63%;
    padding:5px;
    margin-right:15px;
    }
#right_container{
    float:left;
    width: 32%;
    padding:5px;
    margin-right:15px;
    }

It is kind of working, but on smaller browsers (mine is quite wide so I just noticed this when viewing it on a smaller monitor) the ri开发者_C百科ght column is pushed down below the left one :/ anyone have any ideas? thanks in advance. also if you need to see more source code it is at http://sunnahspace.com but here is a forewarning, it is not viewable in IE at all.

It's expected behavior - you're using fixed-size margins and paddings, which means that at a certain point, the total 50px of padding and margin from your two columns will be greater than the 5% of width that your columns don't take up, and will bump into each other. Unfortunately, there's not much that can be done besides specifying a min-width, or using CSS media queries.