Sizing

There are a number of ways to control the size of boxes. The first two properties you will get to know well are aptly named width: and height: .

As with properties affecting typography, there are ways of setting the size of boxes using both absolute and relative measurement values.

Absolute Sizes

CSS

.my-box {
  width: 100px;
  height: 50px;
}

The advantage of ‘hard-coding’ the size of elements to absolute values using pixels is that you know exactly how the site will look. The relationships of elements to each other will stay the same, and never change. Of course, this may lose impact if the screen size of the viewer’s device is not large enough to see all of the content, and they are forced to awkwardly scroll around.

This may also get slightly askew when your user increases or decreases the font size of page which will cause the boxes to increase/decrease as well.

That being said, there are times when using pixels is appropriate.

Relative Sizes

CSS

.my-box {
  width: 100%;
  height: 50%;
}

Another way of specifying size of boxes is through percentages. Percentages work by being the percent specified of the parent element.

If the parent element is <body>...</body> then the elements width can be set using a percentage, and it will stay in relation to the size of the page. However, the height must be set using an absolute value still.

In the following example, the parent-container or outer-box is set to be 66% the width of the window or parent example container in this example. There is no height property given. So instead, it is made tall enough by the browser to hold its content.

The ‘inner-box’ is set to be 75% of the width, and 50% of the height of the ‘parent-container.’

Combining Size Types

CSS

.my-box {
  width: 100%;
  height: 50px;
}

Now that our boxes can resize in relation to the screen using relative values, we will have to be careful about setting absolute sizes, but it can be done in certain contexts.

The following is the same example as the previous except the height of the ‘parent-container’ is set to 300px. There is also more text. Notice that when you make your browser window narrow, the text spills out of the element. This is plain example of bad web design.