Keeping width ratio between two columns css3

Question

I want to use media queries to make a responsive website. I have some pages with 2 columns, others with 3 or 4.

For example I have two columns: #colA and #colB. #colA has width 600px, #colB has 360px with a wrapper of 960px width.

I want to use media queries so that if the wrapper has less than 960px, the columns will keep the width proportions between them (which should turn #colA's 600px to 62.5% and #colB's 360px to 37.5% widths..

Is there a way to do this with html/css? If not what are the other (easiest/lightest) options to use with media query?

<div id="colA" width="600px">content1</div>
<div id="colB" width="360px">content2</div>

to convert in

<div id="colA" width="62.5%">content1</div>
<div id="colB" width="37.5%">content2</div>

Using css/html?

Edit1: Yes it is a CMS. The user sets the width values in px by dragging some sliders in the control panel. I need to make the template responsive, so when the wrapper's width is less then 960px, the columns will still keep their width proportions between them.

Answer 1

Your media query should look something like this, just make sure this code sits beneath the previously assigned styles for #colA and #colB

@media screen and (max-width: 959px) { 
   #colA{ width:62.5%; }
   #colB{ width:37.5%; }
}

Answer 2

I think the easiest way to do it is right in your problem statement. Just use the percentage.

#colA {
    width: 62.5%;
}

and so on...