How to Manage Responsive Design in percentage(%)?

Question

I am building a responsive page layout, but I have a question:

How can I manage width, padding, margin ETC. in percentage(%)?

For example, I want to have my page left side bar 700px and right side bar 300px so what property do I have to use in percentage(%).

Here is my code :

HTML:

<div class="main_div">
    <div class="left_bar">content goes here</div>
    <div class="right_bar">content goes here</div>
</div>

CSS:

.main_div {
    width:1000px;
    float:left;
}
.left_bar {
    width:300px;
    float:left;
    background-color:green;
    padding:15px 0;
}
.right_bar {
    width:270px;
    float:left;
    background-color:red;
    padding:15px;
}

Answer 1

I am assuming the issue you have is that your boxes don't stay on one line when you set percentages.

you need to be careful

width + left/right margin + left/right padding + left/right border = width of container.

like this : FIDDLE