Formula to create a percentage of target… Ethan Marcotte explains as” target divided by context ”
ie 1200px wide layout = 100% eg 2 columns one at 800px wide and one at 400px wide.
container width 1200(px) = 100% – (context)
column one 800(px) (target) x 100 = 80000 / 1200(context) = 66.66666666666667%
column two 400(px) x 100 = 40000 / 1200 = 33.33333333333333%
- use a calculator!
- don’t cut off numbers calculators know best!
“With some simple math we’ve created a percentage-based container and two flexible columns, creating a layout that resizes in concert with the browser window. And as it does, the pixel widths of those columns might change—but the proportions of our design remain intact.” ( Marcotte E,p 40, Responsive Web Design (a book apart).
So thats all good but then we must tackle margins and padding, they dont call it css war for nothing!
The same model works; however… When setting flexible margins on an element, your context is the width of the element’s container. When setting flexible padding on an element, your context is the width of the element itself.