How to Place Elements Side by Side with CSS

In this article, we’ll explain how to use CSS to place elements side by side. Sometimes, in page design, we want to arrange multiple elements horizontally to display specific content or achieve a specific effect. The following details several common methods for achieving this goal.

Read more: CSS Tutorial

Using the display:inline Property

The display:inline property can be used to display an element as an inline element. Set multiple elements as inline and modify their styles to create a side-by-side effect.

span {
display: inline; 
} 

Sample Code:

<p> 
<span>This is an example of <span>side-by-side</span> 
<span> elements.</span> 
</p> 

The elements in the above code will be arranged horizontally on the same line and displayed in the order in which they are written.

Using the float Property

The float property can be used to float an element to the left or right, removing it from the document flow and displaying it side by side with other elements.

span {
float: left; 
} 

Example Code:

<p> 
<span>This is an example of <span> <span>side by side</span> 
<span>. </span> 
</p> 

The elements in the above code will float on the same line from left to right.

Using Flexbox Layout

Flexbox layout is a flexible box layout model that provides a simple and flexible way to implement adaptive layout of elements. You can wrap elements in a parent element and use flexbox properties to control how the elements are arranged.

.container { 
display: flex; 
} 

span { 
flex: 1; 
} 

Sample Code:

<div class="container"> 
<span>This is a </span> 
<span>side-by-side</span> 
<span>example. </span> 
</div> 

The elements in the above code will be evenly spaced and displayed side by side, based on the width of the parent element.

Using Grid Layout

Grid layout is a two-dimensional layout system that allows you to lay out elements in rows and columns. You can wrap elements in a parent element and use the grid properties to control the position and size of the elements.

.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

span {
grid-column: auto / span 1;
}

Sample Code:

<div class="container">
<span>This is a</span>
<span>side-by-side</span>
<span>example.</span>
</div>

The elements in the above code will be laid out in the grid according to the specified number of columns.

Using Absolute Positioning

By setting different position and left/right values ​​for each element, you can place them precisely anywhere on the page.

Sample code:

<span class="span1">This is a</span> 
<span class="span2">side-by-side</span> 
<span class="span3">example. </span> 

.span1 {
position: absolute;
left: 0;
}

.span2 {
position: absolute;
left: 100px;
}

.span3 {
position: absolute;
left: 200px;
}

The elements in the above code are positioned at different locations on the page using absolute positioning.

Summary

This article introduced several common methods for positioning elements side by side. Use the display:inline property to display elements inline. Use the float property to float elements side by side. Flexbox and grid layouts offer more flexible side-by-side layouts. Additionally, you can use absolute positioning to position elements anywhere on the page. Choose the appropriate method based on your needs and adjust the styles as needed to achieve the desired effect.