# Positioning Methods
# Multi-column
Not a positioning system, but can be co-opted for vertical masonry style layouts.
Columns will always be equal widths, so doesn’t work if you want “sidebars”.
See the Pen CSS Positioning Systems--Multi-Column by Dave Cross (@davecross) on CodePen.
# Position: *
Position: absolute could work, but most position rules take content out of the normal flow of the document. This can result in content flowing under or over the positioned element (depending on z-index and source order).
See the Pen CSS Positioning Systems--Position by Dave Cross (@davecross) on CodePen.
# Display: inline
Requires sizing on child elements. Also requires all code in the block to be on a single line (no code formatting). Any returns are translated to spaces that will affect layout.
See the Pen CSS Positioning Systems--Inline by Dave Cross (@davecross) on CodePen.
# Float: *
We used float for years. It was one of the first methods we leaned on after table-based layout was declared bad. With floats, siblings have no communication with each other. Varying heights will occur and you’ll either need background images on the parent or some JS magic to make columns look the same height.
See the Pen CSS Positioning Systems--Floats by Dave Cross (@davecross) on CodePen.
# Display: table
Display:table had a very short run, but was excellent. Technically, there’s nothing wrong with it. Code stays semantic, but you get all the benefits of old-school layouts. The browser does add shadow DOM elements to the mark-up for “missing table elements”, but these happen in browser, so there’s no real cost to the user.
I feel like people rejected this method for two reasons:
- We still have this stigma that tables are evil and now fight with making them look good from mobile to desktop.
- Flexbox arrived soon afterward.
See the Pen CSS Positioning Systems--Table by Dave Cross (@davecross) on CodePen.
# Display: Flex
Flexbox is amazing. It has so many powerful features built into. The challenge comes when you want flexible columns AND gaps. There is a new gap property for flex, but for now, we need extra margin and padding styles to achieve our grids.
There's a second issue with using Flexbox: it wasn't truly designed to accept widths. Using width locks an element to a fixed size, removing the "flexible" nature that Flexbox provides.
See the Pen CSS Positioning Systems--Flexbox by Dave Cross (@davecross) on CodePen.
# Display: Grid
The new kid. Makes grids so easy. That is it’s namesake after all. Supported all the way back to IE10, but not with the newer syntax. Missing features in IE like auto-flow make people scratch their heads at how to make it all work. But you can prefix and use feature detection to set fallbacks. Or you can use the strengths supported by all browsers and use flexbox for the rest.