The box model, units and float layout

The box model is how CSS treats every element as a box: the content, inner space (padding), a border and outer space (margin).

Every element is a box

To the browser, every element on the page is a rectangular box. The box has four layers, like a set of nesting dolls, counting from the inside:

1. the content (text, an image);
2. padding: the inner space from the content to the border;
3. border: the frame;
4. margin: the outer space, the distance to the neighbors. It is transparent and paints nothing.

All the oddities, such as “I set the width to 200 and the block came out 250”, grow from here. By default (this is called box-sizing: content-box) the width you write applies only to the content, and the padding and border are added on top. That is how it was counted from the very start, but in the 2000s it was so irritating that first Internet Explorer counted it differently (the “human” way), and then the standard admitted it too: you can choose box-sizing: border-box, and then the width means the whole block.

Turn the sliders and switch the mode.

That is why almost every stylesheet starts like this:

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

The asterisk * means “all elements”. We give the root border-box and ask everyone to inherit it, so any single block can still be put back the old way when needed.

Units: what is compared with what

• px: the pixel. A fixed size that depends on nothing. Good for thin lines (a 1px border).
• rem: the font size of the root element. It is 16px by default, but a person can enlarge the font in the browser’s settings, and every rem grows with it. That is why text sizes and spacing are written in rem. The site then listens to its reader.
• em: the font size of the current element. Useful for spacing that should grow with the text (inside a button, say), but nested em values multiply, and that causes a lot of confusion. Start with rem.
• %: a share of the parent’s size. For the width of columns.
• vw and vh: a share of the width and the height of the window. Take them with care: on a phone the height of the window changes as you scroll.
• ch: the width of the digit “0” in the current font. Ideal for the width of a line of text: max-width: 65ch.

One rule worth remembering: don’t set a font size in px on html or body. That cancels the reader’s setting.

Float: how columns were made

It began with a picture in a text: the property float: left pushes a block to the left edge, and the text wraps around it on the right. In the mid-2000s, when layout had only tables, which had long been considered bad manners, authors took float and made columns of it: float: left on the main block and float: right on the side one.

The trick has a price. A floated block is “taken out” of the flow, and a parent that holds nothing but floated blocks collapses to zero height. The footer that comes next tries to take the space beside the columns. The cure was clear: both on the footer, or a clever “clearfix” on the parent. Try it on the diagram: check and uncheck the boxes.

The fashion had its peak too. In 2006 the article “In Search of the Holy Grail” (in A List Apart) described how to make three columns: a fluid one in the middle, fixed ones at the sides, and the main content first in the source code. It took a dozen clever rules, and the whole “holiness” was that it couldn’t be done any other way. Eight years later the same task came down to a few lines of flexbox. You’ll meet float in any old site: now you know where it comes from and why it is there.

Practice

You’re in the era of 2005. Your page is already dressed, and right now it is stretched into one column. Make two columns with float, the same way they were made then. Don’t be alarmed if the footer first ends up in the wrong place: fixing that is exactly what the clear property is for.

The widths of the columns, in percent, should add up to less than a hundred: that leaves a gap between them. Percentages and rem are no accident in this exercise: they let the page stretch and shrink. Fixed widths in pixels are worse: on a phone such a page will stick out past the screen.

What was wrong with 2005

Columns made with float held together on conventions and “hacks”: put a picture that was too wide inside a column, and the whole layout fell apart. A fixed width of 960 pixels (for screens of 1024 × 768) was considered the standard, and on a phone such sites had to be enlarged with your fingers. You’ll rebuild this site in the era of 2014, when flexbox, grid and responsive design arrive.