How to Calculate Element Dimensions with CSS


show more Calculating element dimensions provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts show less
please wait ...

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 ...

Calculating element dimensions
Video duration: 11m 11s 8h 57m Beginner

Viewers:

Calculating element dimensions provides you with in-depth training on Web. Taught by James Williamson as part of the CSS: Page Layouts

Subject:
Web
Software:
CSS
Author:
please wait ...