Responsive Web Design Formula

It's actually pretty easy with "the magic formula".

target รท context = result

We just enhance the formula with percentage, as follows

(target / context) x 100 = result %

You get the result in percentage,
ex:-
(900 / 960) x 100 = 93.75%

Note:- decimal numbers acording to maijor browsers
Browser Value
Firefox Two decimals
Internet Explorer - IE Four decimals


Lets start use the formula

   
Target value Add target value
Context value Add context value
Yes, its percentage 100
Calculate
Percentage value


Consider the following mock-up, let's start convert that to CSS, to create responsive fluid grid.
responsive design mock-up


wrapper style #wrapper{
margin: 0 auto;
width: 960px;/* 900 / 960 */
}


container style #container{
margin: 0 auto;
width: 93.75%;/* 900 / 960 */
}


main style #main{
float: left;
width: 72.22222%;/* 650 / 900 */
}


side style #side{
float: right;
width: 23.8888%;/* 215 / 900 */
}


Author
Sameera Thilakasiri By Sameera Thilakasiri
He is a website designer based in Colombo. He is blogging technical articles while his leisure.
Follow Me at Twitter and Google+ and check out my blog.