From the course: CSS: Float-Based Page Layouts (2012)

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Calculating percentage values

Calculating percentage values - CSS Tutorial

From the course: CSS: Float-Based Page Layouts (2012)

Start my 1-month free trial

Calculating percentage values

For the most part, you'll find that planning a flexible layout is almost exactly the same as planning a fixed layout. Now, the biggest difference, and honestly one that adds just another entire layer of difficulty, is calculating the percentage values that you'll need for your elements. Now, rather than setting a fixed-pixel values for widths, margins, and padding you'll need to determine the proper exchange values for the desired layout. Because of the way percentage values work, this can often be a little tricky, so I wanted to take some time to go over it here. Now, again I have a document open. I've got fluid_planning.ai, which is an Illustrator file opened up in Illustrator. If you want to do this a little along with me, feel free to grab another piece of sketch paper, or you can open this up in Illustrator if you have Illustrator. It doesn't really matter. What's the most important thing here is that we're focusing on how to properly calculate percentage values for elements…

Contents