Sizing

Basic Layout The Box Model Boxing Sizing Min and Max Values TODO

Overflow

Dealing with Spills Overflow in Practice TODO

Borders

Drawing Edges Properties Radius Borders in Practice TODO

Padding

Giving Some Cushion Padding in Practice TODO

Margin

Adding Separation Margins in Practice TODO

Display

What You See... Properties Display In Practice TODO

Hidden

...And What You Don't Hiding in Practice TODO

Position

Placement on the Page Normal Position Relative Position Absolute Position Fixed Position Positioning in Practice TODO

Z-Index

The Z-Index and Layering Z-Index in Practice TODO

Float

Floating Clearing Float Float in Practice TODO

Boxing Sizing

drawing basic boxes

There are a number of ways to control the size of boxes. The first two properties you already 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 are relational to the percent specified in 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 an example of bad web design.