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.

 

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 */
}