CSS Layout Techniques: Part 1

CSS layout techniques is a subject I’ve had to learn gradually, picking up bits and pieces over time and with experience. The problem with learning this way is that you’re never quite sure if you’ve got it all. Putting this article together is my way of running through, from start to finish, all the techniques I know of and any more I could find, to fill in any gaps and clarify any ambiguities. Also, I like writing these articles – so there’s that too!

The Tried and Tested

Website layout has been going on for a wee while now, so, there are more than a few interesting techniques out there. Weirdly though, they’re pretty much all hacks. First up, Tables (First appeared around ’94). As always, it’s covered in depth on CSS Tricks and there’s a nice addition about table-layout: fixed; which makes them more bearable. But, as far as layout is concerned, don’t use them – they’re for data (think spreadsheets).

That was quick! OK, next up: Floats (Thanks to Netscape 1.1, ’95): built to float images around text, not for layout. Granted, there was nothing else to use – apart from position, which was actually meant for layout. Unfortunately, positioned elements have no context awareness and are pretty brittle, so, floats won – they have clear. But, they do have their problems, here’s a few for interest:

  • “float drop”: with a pair of floated columns – if one gets a bit too wide, usually due to content, it drops below the other.
  • “float containment”: if the float’s containing element has no other content, it’ll collapse to nothing. This is intentional, it allows multiple <p>s to wrap text around the floating image, see the “clearfix” below for the fix.
  • “float stepping”: occasionally floated elements will refuse to sit in line with each other (horizontally), instead there will be a small “step down”. This is a result of a block level element leaving a kind of pseudo <br> which floats pick up on and respectively “step down”. The solution is to find the responsible block and inline it (if possible) or switch around which elements you’re floating.

The “clearfix”, to be applied to any element that contains floats:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

So, they work…ish. Fortunately, we don’t need to use them anymore – there are better ways! Before we get to them though, let’s have a look at one last technique that’s been replacing floats for a while, Blocks. More specifically, display:inline-block;.

This pretty much does what a float will do but the parent doesn’t collapse, and we can center things – horizontally and vertically (with a little trickery). Magic! Ish. Turns out there are a few gotchas here too. If there’s white-space between the elements in the HTML that will render as a small 4px gap, which actually makes sense given that “inline” really means “in a line of text”. We can use negative margins or minimize our HTML to fix it. But, that’s bringing us back into the land of hacks. So, inline-blocks aren’t “better” than floats – they’re just a good alternative to know about, I use them instead of float:right; as text-align:right; won’t flip the DOM order. Also, don’t forget about that vertical centering thing! Here’s a nice demo on codepen showing how to do it.

That’s it for the intro but, stay tuned; next week, I’m demystifying Flexbox. Check out the sneak peek below!

Flexbox is the first thing we have that is actually intended as a layout tool. It’s actually intended for use in components while CSS Grids are set to take on the main page layout – but, they’re not quite ready yet. When they do come out though, each will be able to live inside the other, so go crazy when that happens and bend the rules! That’s why I actually wanted to start this article – to go through FlexBox in detail before using it in bigger projects. At the highest level it works by defining the relationship between a container (the “Flex Container”) and, within it, a group of children (the “Flex Items”). In this installment of CSS Layout Techniques, I’ll focus on each individually.

 

Front-End Friday is an ongoing series about our favorite tools, tricks, lessons, and best practices. Want to share your own favorite front-end development lesson? Chat with us on Twitter!

  • Iain McCallum

    One teeny update – I’m pretty sure the white-space gap between inline-blocked elements is not universally 4px, rather it’s inherited from the font size & font family. With that in mind you could set the font size to 0 then bump it back up for any children that have text – it’s messy but not as weird as negative margins.

« Prev Article
Next Article »