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 element dimensions - CSS Tutorial
From the course: CSS: Float-Based Page Layouts (2012)
Calculating element dimensions
One of the most important skills in CSS regarding page layout has nothing to do with positioning elements on the page. It is in fact the ability to accurately calculate an element's dimensions. Now on the surface that sounds like something that's pretty easy to do, but as we are going to see, it gets a little bit more complicated than maybe you'd think at first glance. So to illustrate this concept, we are going to be working with the dimensions.htm file, and you can find this one in the 01_02 directory, in the Chapter_01 folder. Okay, so if I take a real quick look at the structure of the page, you are going to see that it's very similar to the exercise file we just worked with. We have two divs, an outer div and then an inner div with the class of box applied to it, and that has a paragraph inside of that. Our sort of default styles that we have going on: the outer div tag is now set to a width of 600px wide, it has a margin of zero for top and bottom, and then left and right is set…
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
-
-
-
Box model review8m 47s
-
Calculating element dimensions11m 11s
-
Understanding margin collapse7m 59s
-
Calculating em values7m 41s
-
Calculating percentage values7m 51s
-
Normal document flow13m 3s
-
Controlling element display8m 53s
-
Using CSS Resets7m 11s
-
Fixed, fluid, and responsive layouts9m 9s
-
CSS debugging tools6m 46s
-
Using the Firebug Inspector and the WebKit Web Inspector11m 5s
-
-
-
-
-
-
-
-
-