From the course: CSS: Float-Based Page Layouts (2012)
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Calculating percentage values - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
(Locked)
Designing for flexible layouts2m 30s
-
(Locked)
Calculating percentage values8m 45s
-
(Locked)
Setting flexible width values6m 6s
-
(Locked)
Making images flexible8m 10s
-
(Locked)
Setting minimum and maximum widths7m 24s
-
(Locked)
Building flexible layouts: Lab4m 53s
-
(Locked)
Building flexible layouts: Solution6m 47s
-
(Locked)
-
-
-