Reply To: CSS the proper way

[Merri]

Back when I started to learn non-tabular layout in around 2004 – 2005 I had a lot of headache with relative and absolute positioning, as I thought I could just have some boxes and place the next box relative to the last one by using specific X and Y coordinates. That just isn’t how CSS works and I couldn’t get anything done properly with that mindset. I had to change my mind.

Instead with CSS you have a flow. Regular blocks (like divs, headers and paragraphs in their default settings) flow only from top to bottom and consume all the space horizontally that is available to them. It’s probably the simplest flow you can think of.

Float is the old friend that many used as an alternative to tables after tables were abandoned. Floats take an element, rip it out of the flow and place it to the extreme left or right unless there already is another floated element in the way. And if there isn’t enough space in the row then the element goes below the other floated elements. The parent element can be hacked to take floated elements inside it into account (for example with clearfix or overflow: hidden;) so that the parent element’s height goes as far down as the bottommost floated element inside it.

As browser support has increased we also got display: table; back into the picture, but it isn’t often a good choice as you can’t swap elements around with it, they always go in the source order. And that is something you couldn’t really do conveniently with floats either: moving later elements from bottom to top isn’t easy to do.

The last warrior of “old school” way to create layout, and that is less known and popular, is the inline-block. It flows like text, which makes it initially harder to understand. People also find it difficult to control space between the elements. But once you start to look at ways CSS allows to control text you’ll start finding some interesting possibilities you can only conveniently do with inline-block: justify, center, direction, vertical-align… these allow for some tricks that can be harder to achieve with floats or tables. Direction for example can swap the order of elements on all rows. Or you can build your design from center instead of making a container box that takes the floated elements that go left and right. It’s a very different way of thinking about layout.

The new school is coming though: the flexbox and the grid (which should not be confused with column grids that are common with responsive sites these days). The flexbox is closer to adoption and every day use, but isn’t yet there for most of the bigger sites. The difference with flexbox to floats and inline-blocks is that it is actually intended for creating layouts. Floats and inline-blocks are hacks. Tables are hacks too, just worse for being bad for the structure of HTML.