Cool CSS Tricks: Vertically Challenged

CSS can be deceptively simple once you know the right tricks. Today I’d like to share some of my favorite cool CSS tricks for vertical alignment.

Have you ever sketched something you thought was simple, only to discover that it’s not so simple to build for web? Maybe you’ve even been told it’s impossible. Here’s a secret: anything’s possible.

Vertical alignment can be particularly frustrating for beginning designers. It’s true that HTML’s flow isn’t really built for this, but that’s no reason to give up.

Vertical-Align

First, let’s look at the basic property: vertical-align. In some cases, this is all you need, but be aware of the implications. If you set an element to vertical-align:top, ask yourself, top of what? That said, one of the easiest ways to vertically align a set of elements is this:

This property is meant for inline elements – or in this case, the very useful inline-block. The containing div will keep the aligned elements together, giving an easy answer to the question “top of what?” for your first line. Be aware of width, and how many will fit across the page – these can wrap to the next line, but the next line will still be aligned vertically.

Yes, there are drawbacks. What if, for whatever reason, you can’t make your element inline, or you want all the elements to be the same height, but don’t know what that height is?

Vertical alignment is still possible.

Vertical Alignment Challenges

I don’t know what height to use.

Maybe you need the content to auto-flow, but you want everything in the row to extend to match the longest element. How do you pull that off? You play with the margin:

By setting the bottom padding to 100%, you extend the padding to the bottom of the page. By setting the margin to -100%, you bring the measured bottom of the element back up to its original, auto-determined position. The padding, essentially, takes up no space.

The containing div will adjust its height to fit the largest enclosed element, and overflow:hidden will chop the visible padding for all the elements at that height. Be aware that border position is determined by padding, not margin, so a bottom border will not be visible if applied in this case.

I need to align block elements.

If inline-block just isn’t good enough, don’t give up. There’s still a way to handle this, using positioning. Simple alignment is easy enough:

But what if you want to center an element vertically? Now it’s time to bring in a handy value of transform, translateY. I have to thank zerosixthree.se for starting me on the right path for this trick, but I believe I’ve improved on it. The original used relative positioning – but this broke in Chrome and on iPads. Instead, I use absolute positioning.

Here’s how it works:

*Remember to set the containing div to position:relative, because an absolutely positioned element will reference the first enclosing element that has position set. If none do, it will reference the entire page.

Setting the element to top:50% will place the top of the element halfway down its container. TranslateY shifts the element on the Y axis – but its percentage values reference its own height. So shifting the element in the positive direction by half its height brings the vertical center of the element to where the top would have been – the vertical center of the containing div.

Sidebar

Have you ever wanted an accent color in the background of a sidebar? Did you find that your sidebar is actually a box on one side, that doesn’t extend to the bottom of the page? Maybe it’s time to think outside that box.

Why apply the extra color where you want the accent? It seems a stupid question, does it not? It’s natural to think of the smaller area as the extra color. But here’s the trick: apply the extra color to your longest section. Style the entire body with your accent color, then apply your main color to a div that you wrap around the main content:

Putting a height of 100% on your HTML and body elements will ensure that they are at least as tall as the window. Because they will expand to be as tall as necessary to contain the content, the accent color will also expand to the bottom of the page, even if the sidebar itself does not. The main color is applied to the background of an element inside the body, with a margin that allows that accent color to show through.

Topics: Web Design