Menu iconMenu
Note: This post has several embedded CodePen examples so apologies for any load time issues… On the bright side, you can click on the HTML/CSS tabs of the examples to see how they’re implemented.

The range of conversation topics covered around the coffee machine in our office is vast. Example topics include how to fix my washing machine for $20, and covfefe (as we are part of the small group of people who know exactly what this means…).

In a more recent huddle, I asked one of our developers Ersin if there were any CSS problems he found himself struggling with on a regular basis. His answer was something along the lines of “most of the time I’m just trying to get this damn thing to sit next to this damn thing!”

His response surprised me at first. There are lots of ways to display elements side by side using CSS… and then I realised – that’s the problem. As with most things in CSS, it’s not immediately obvious which method to use where. It came flooding back to me how long it took me to get my head around this stuff when I was starting out.

Which got me thinking – if I could explain how to display elements side by side using CSS to the version of me who had no idea, what would I say?

It’s all about the context

This is the key point I’d drive home. In order to figure out the best solution, you need to fully understand the context of the problem and be able to weigh up the pros and cons of using each method to solve it.

Designs may look completely different between each project, but you’ll come across certain layout patterns over and over.

Know your options

Once you know the context of the layout you’re trying to achieve, you need to know your options for displaying elements next to each other:

  • Set display to inline-block
  • Use floats
  • Use positioning
  • Set display to flex or grid (*if project constraints allow)

*Flexbox and grid display options will soon become the go-to solution for most of the layout issues we previously solved via alternative methods. For now though, browser compatibility and the lack of graceful degradation mean it’s not always an option.

Know the challenges

Part of understanding the context of the layout you’re trying to achieve is understanding the challenges involved. The most common challenges you’ll face when laying things out side by side with CSS include:

  • Dynamic content
  • Displaying elements of different types and sizes within the same row
  • Vertical alignment of elements
  • Spacing of elements
  • Dealing with different screen sizes

When to use inline-block

Setting the display of an element to inline-block means that while it will possess most of the characteristics of a block element, it will display on a line with other inline or inline-block elements.

This is as opposed to a block element, which will take up as much horizontal space as possible (unless a width is set) and won’t allow any other elements to occupy the space next to it (unless it is floated).

Here’s an example of how the different display types are handled:

See the Pen Side by Side: Inline vs Inline-block vs Block by Julia Hide (@jooleearr) on CodePen.dark

Inline-block Examples

Inline-block is great for displaying a mix of HTML element types on a line, such as navigation lists, toolbar items and common combinations such as an image avatar and username etc.

See the Pen Side by Side: Using Inline-block (Example 1) by Julia Hide (@jooleearr) on CodePen.dark

See the Pen Side by Side: Using Inline-block (Example 2) by Julia Hide (@jooleearr) on CodePen.dark

Inline-block Gotchas

  • Whitespace within the markup will create small amounts of visual space once the page renders. This means you can’t rely on percentage widths that add up to 100% actually fitting on one line.
  • The vertical align property can take a while to get your head around (mainly because it is aimed at aligning text as opposed to page layout). Note that it only works on inline and inline-block elements and that it is used to align elements to the line, not within the parent element. For a really good explanation of how vertical align works see Vertical-align: all you need to know.

When to use floats

The float property’s origins stem from the print industry, funnily enough. Its initial purpose was to allow text content to flow around other elements (most commonly images), like you’d see in a magazine article.

As the web started moving away from table based layouts, the float property kind of got repurposed to help with layout structure. A rambling nest of tables could now be replaced with a few divs, floated alongside one another.

The float property remains one of the most popular ways to layout structural elements on a page. Floats are usually the best option for grid layouts as well as layouts where you want one element to the left of the row (e.g. a heading) and another element to the right of the row (e.g. a button).

Float Examples

See the Pen Side by Side : Using Floats (Example 1) by Julia Hide (@jooleearr) on CodePen.dark

See the Pen Side by Side: Using Float (Example 2) by Julia Hide (@jooleearr) on CodePen.dark

Float gotchas

  • There is a well-known issue where a containing element will collapse around a floated element prematurely. You need to employ a clearfix class to fix this issue.
  • You need to set a width on a floated element if you want other elements to wrap around it. Without a width declared, the element will fill the width of the container if it has enough content to do so. Widths should use percentage units if dealing with responsive elements.
  • Handy hint: you don’t need to declare display: block; on floated elements as they are automatically converted to block-level elements.

When to use positioning

Disclaimer: using the position property to display elements side by side needs to be used with caution.

Setting an element’s position property to ‘absolute’ or ‘fixed’ removes it from the flow of the document. As soon as you do this, other elements will basically ignore it. This can lead to janky display issues such as overlapping elements.

Absolute Positioning

I tend to only use absolute positioning when I know the dimensions of an element and that altering any content within it is not going to affect the dimensions (e.g an icon). The other use case is where you don’t actually mind if content is displayed over top of the element (or vice versa).

The key thing to remember with absolutely positioned elements is that they will position themselves relative to the closest ancestor element with position not set to static.

Positioning Examples

See the Pen Side by Side: Using Positioning (Example 1) by Julia Hide (@jooleearr) on CodePen.dark

See the Pen Side by Side: Using Positioning (Example 2) by Julia Hide (@jooleearr) on CodePen.dark

A note on Fixed Positioning

Fixed elements will position themselves relative to the document and are unaffected by scrolling. While fixed elements are sometimes suitable for things like sticky headers and side panels, they’re not really a good candidate for displaying elements side by side.

Enter flexbox and grid…

The common theme with most of the methods described above is that these CSS properties weren’t really intended to solve complex layout issues. This is one of the main reasons people get frustrated with CSS – it just feels like you’re using the wrong tool for the job a lot of the time.

Just as table layouts were ditched in favour of floats, most of the methods described above will decline in popularity as it becomes more feasible to use flex and grid display options in production.

I’m not going to go into how to use flex or grid in this post because:

  1. There are already so many great resources covering the topic.
  2. It doesn’t require as much explanation as other methods because it was actually designed to solve layout issues.
  3. We have a ruthless blog editor who will just cut anything over the word count limit. I’m crossing this sentence out so the words don’t count towards said limit actually…

The TL;DR;

  • Assess which elements you’re trying to display side by side and the challenges that may crop up (different content affecting dimensions etc).
  • Use flexbox or grid layout properties where suitable (if project constraints allow).
  • Otherwise, weigh up the pros and cons of the methods described above and choose the one that will cause the least headaches trying to implement and maintain.

Bam. Done. And not a GIF in sight…

Working remotely: A surfer’s guide

Brought to you by Ersin - a committed remote worker who balances his love of waves with his love of code.
Ersin Posted by Ersin on 19 May, 2017
Comments Comments
Add comment

One Reply to “A CSS Guide to Side by Side”

Leave a Reply

Your email address will not be published.