Flexible Math A quick way to get pixel widths in percentages.

You need your widths in percentages and all that stands between you and 2 to 17 digits of flexible-width glory is the calculator. You know that you can win the fight, but not without the pain of entering the same numbers in over and over. Then copying, pasting, moving a period and adding a percentage sign.

In time, the calculator will suck all of the joy out of your existence. Ok, it's not that bad but using the calculator to get percentage widths does suck. I made this to help me get them faster and thought I'd share.
Wanna give feedback? Hit me up on Twitter or Wufoo.

An Example Layout

Explanation

In this example: the context is 960px, the first target is 650px, the second target is 40px and the third target is 270px.

  • Context Width = 960
  • 1st Target = 650
  • 2nd Target = 40
  • 3rd Target = 270

As you enter those, BOOM! You have percentages to run with and if you want, some really basic CSS to copy.

The key thing to remember for doing math for flexible layouts is Target / Context = Result.

Enter a context width and some target widths to get percentages quickly.

Mobile Web Ad

Learn about the mobile web and responsive design, through interactive coding in your browser.
Try for free on Code School today!

The goal for this little script is to be quick. It would be cool to allow you to assign targets as margins, padding, etc. but it wouldn't be as quick. I want to get you back to your editor. However, you can edit this before you go...