As part of my job, I’m sometimes required to interview prospective candidates for jobs. Over the years, I’ve developed a suite of tests which the candidate and I talk though, with the idea being that they get the chance to demonstrate their knowledge and experience.

One part of the test is an opportunity for the candidate to demonstrate their understanding of basic layout techniques such as floating, positioning and the use of background images. These, for me, are so core to our toolset as web developers, I feel this knowledge should be present in any web dev’s brain.

The thing is, floating is weird. I’m of the generation of web devs who learnt how to float in such a way as it would work in IE6. There’s a lot of increasingly irrelevant information gathered from Position is Everything knocking about in my brain. Blueprint existed back then, but I certainly never used it. I built every layout myself.

I’m beginning to feel that the younger generation of web devs haven’t had this trial by fire to the same extent. They have all kinds of amazing skills which I lack, but many candidates fail to articulate workable solutions to what seem to be simple questions.

Say, for example, you needed to take this image:

… and make it so that the bar between the two weights expanded, depending upon the width of the browser. The two weights remained hard left and hard right, and the bar just sort of magically stretched.

Using standard layout techniques there are many ways to do this (which I won’t list here please see my Codepen). But this is not something which any CSS framework does out of the box (neither should it!).

To achieve this layout requires a relatively deep understanding of at least some of the following techniques:

Floating

Self-clearing

Vertical align of inline elements

Positioning

The concept of “document flow”

Image sprites

Tabular data, and what it is appropriate for

Flexbox, and it’s browser support

I’m certainly not suggesting a return to the techniques which work in IE6. But the use of a CSS framework is not a replacement for a core understanding of fundamental layout principles.

Addendum

Some developers suggested I should provide examples of how this could be done. I’ve created a Codepen of various methods here, along with a brief discussion of issues around them.