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:
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.
- 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).
- 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.
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.
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:
- There are already so many great resources covering the topic.
- It doesn’t require as much explanation as other methods because it was actually designed to solve layout issues.
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…
- 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…