Lesson 2.4 – Dimensions: Adding It All Up

In the previous lessons you learned how to specify the properties for height, width, padding, margins, and borders. In this lesson, we’ll learn how to put it all together.

Adding It Up

When you create block level elements, they have four properties, in each the x-direction (horizontal) and y-direction (vertical). In order to properly lay out something within a specific space, you must be sure to calculate these properly.

The values in the x-direction are: width, padding, margin, and border.
The values in the y-direction are: height, padding, margin, and border.

If you simply add these properties up, you’ll know the true width and height of the elements. Add up all of these values for all of the elements in the x or y direction to know the total width or height of that area.

Keep in mind that padding, margins, and borders can be on both sides, the left and right, top and bottom. So, if you have a padding set to 5pixels, make sure you add it in twice.

So, some simple equations are:
true width = padding-left + border-left + margin-left + width + margin-right + border-right + padding-right

true height = padding-top + border-top + margin-top + height + margin-bottom + border-bottom + padding-bottom

The actual order of the elements doesn’t matter, since it’s all just addition. The order I put them in here is the order that the actually are on the element, left-to-right, top-to-bottom.

Practice Makes Perfect

It’s pretty easy to add these up… at least in theory. It takes a bit of practice and a little simple algebra to actual make proper use of this knowledge. Let’s do some real-life examples for a little practice.

Example One – True Dimensions of a Single Division

Okay, let’s say we have a division element with the following CSS applied to it:

div {
 width: 500px;
 height: 200px;
 padding: 5px;
 margin: 5px;
 border: 2px solid black;
}

Now then, we’ll just add the values up to figure out it’s true dimensions.

x-direction is equal to 500px (width) + 5px (padding on the left side) + 5px (padding on the right side) + 2px (border on the left side) + 2px (border on the right side) + 5px (margin on the left side) + 5px (margin on the right side). Add them all up and we find out that our actual width is 524 pixels.

y-direction is equal to 200px (height) + 5px (padding on the top) + 5px (padding on the bottom) + 2px (border on the top) + 2px (border on the bottom) + 5px (margin on the top) + 5px (margin on the right side). Add them all up and we find out that our actual height is 224 pixels.

Here are those same calculations with just the numbers so you can see it a bit easier:
true width = 500px + 5px + 5px + 2px + 2px + 5px + 5px = 524px
true height = 200px + 5px + 5px + 2px + 2px + 5px + 5px = 224px

This was a simple one to just figure out how much space our division is actually taking up. However, what if we want to figure out how wide and tall to make it if we want to fit it in somewhere?

Example Two – Getting the Division to Fit

Let’s say we have a space that we’ve determined that we have 300 pixels of actual room, and 500 pixels of actual height.

Now, we determine that we want to have 10 pixels of padding, and we want 10 pixels of margin. We also want a 3 pixel border on only the left hand side of our division. We now need to know what to set our width and height to be if we want to take up exactly the 300px by 500px space we have.

Here is where that little bit of algebra comes in that I mentioned. We’ll plug in the values we determined and then solve for the width and height.

true width = padding-left + border-left + margin-left + width + margin-right + border-right + padding-right
300px = 10px + 3px + 10px + width + 10px + 0px + 10px
300px = 43px + width
width = 300px – 43px
width = 257px

true height = padding-top + border-top + margin-top + height + margin-bottom + border-bottom + padding-bottom
500px = 10px + 0px + 10px + height + 10px + 0px + 10px
500px = 40px + height
height = 500px – 40px
height = 460px

So, we know that if we set the width property to 257 pixels and the height to 460 pixels, our divison will take up exactly the 300px by 500px space we want it to take up.

As you can see, it’s not too difficult. You can simply add up these true widths and true heights to figure out how much space your site is taking up along the different directions. Since monitors and browser windows have limited dimensions, you will either have to create an outer division with a fixed size, or create a layout known as liquid or fluid layouts which grow with the browser window. We’ll cover the main methods of laying out websites using CSS in future lessons.

In this lesson we wrapped up how to determine the dimensions of your elements. Since division elements are block-type elements you can’t just set them next to each other and expect them to line up. You’ll either have to float them, or position them using absolute values. We will cover these in a future lesson. However, before that, we’re going to take a break from laying elements out and discuss color, including border color, font color, and background colors.