Menu

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