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

Calculating element dimensions - CSS Tutorial

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

Start my 1-month free trial

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…

Contents