Aligning elements using CSS four ways

Hacking away at CSS most of the time goes straight from the brain to the fingers - sizes, colors, borders of elements are easy to remember. There are some parts of CSS, for me anyway, which require frequent Googling when ever I have to use them. One example of this is aligning elements. It’s always been kind of a pain in web dev because there are a fair few ways of doing it, and there’s always a new way which “we might be able to do now because it’s supported in most browsers”.

This post will briefly go through some of the solutions I use for alignment.

Inline/Inline-block

The “natural” way of aligning elements horizontally:

.thing {
  display: inline;
}
-- or -- .thing {
  display: inline-block;
}

Non-block elements (span, a etc…) will naturally align themselves horizontally. Block elements (div, p etc…) won’t, so adding the above inline display property will force them to display inline. Often this method is overlooked and people may jump to a more modern route.

People may want to centrally align these elements, which is easy! Just add a text-align property to the parent element.

Float

The inline method isn’t always the best as you may want some control over the more than just a few elements, including widths etc, which can often be tricky. Floats are a pretty solid way to get around this, while being supported in all browsers.

.thing {
  float: left;
  width: 50%;
}
.thing2 {
  float: left;
  width: 50%;
}

Floats, again, align horizontally. They can also be a little tricky, but there’s only a couple of things to bear in mind.

• Float multiple elements in the same direction to put them next to each other.

If you float 2 elements left, they’ll position next to each other until there’s not enough space, and then go to the next line. setting the width here plays an important part as shown above.

• The second (and most important) consideration is breaking out of the float.

If you don’t clear the floats, the next element will assume a strange (and probably unwanted position). Clearing the float puts the document flow back to normal and means you won’t get any potentially unwanted behavior. A separate div/spann below the floated items with the clear class as shown below will break out of the float.

.thing {
  float: left;
  width: 50%;
}
.thing2 {
  float: left;
  width: 50%;
}
.clear {
  clear: both;
}

Flexbox

Flex has been around for a while and, in my opinion, is great! It’s not so good for large scale grid layouts, but it’s perfect for aligning smaller elements such as buttons, images, and other content within components. The only problem with Flexbox is the browser compatibility, as seen on Caniuse.

There’s an excellent tutorial on this by Chris Coiyer here, but I’ll summarise a typical use case below:

.parent {
  display: flex;
}
.child {
  width: 40%;
  margin: 10px;
}

This will show the child elements next to each other, spaced nicely. You can change the spacing using the justify-content property on the parent element to a bunch of different values, most of which will suit your needs well.

Grid

The Grid Layout is a pretty new specification - so new in fact that it’s not supported on mobile browsers yet and only supported on the newest evergreen browsers. The grid layout is not as easy to learn as the rest (in my opinion) as there’s a lot to take in with all the properties for the parents and children.

It differs from Flexbox in that it has a 2D scope, so handles both columns and rows simultaneously, whereas Flexbox handles one or the other. In the next year or so when it becomes widely supported the hope is that it will render hacky third-party grid systems obsolete.

I won’t go into an elaborate example as there are many sites out there doing it really well, such as good old sitepoint article, but here’s a basic example:

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100vh;
}

Assuming you have 3 elements in your grid, this will space them out equally over the container with 100% height.

So that’s a little insight into alignment for me. There are tonnes more ways to do things which many people are happy doing, but this is mine!