3 ways to display div element to the right using CSS

In this article, we will learn how to display HTML elements (div, p etc.) to the right in CSS.

Display element to right using float property#

One of the most commonly used ways to display something to the right in CSS is to use the float property. Here's an example of how to use the float property:

1. The float-right class is used to apply the float property to the element.
2. The float: right; CSS rule sets the element to float to the right side of its containing element.
3. The content div will appear next to the floated element.

Display div element to right using flexbox#

Another way to display <div> element to the right in CSS is to use the flexbox layout. Here's an example:

1. The flex-container class is used to apply the flexbox layout to the container element.
2. The justify-content: space-between; CSS rule aligns the items with equal space between them.
3. The item class uses the margin: 5px; rule to add 5px gap.

Using grid system#

Another way to display something to the right in CSS is to use the CSS grid system. Here's an example:

1. The grid-container class is used to apply the CSS grid layout to the container element.
2. The grid-template-columns CSS rule sets the number and size of the columns in the grid.
3. The grid-gap CSS rule sets the gap between the grid items.
4. The item1 and item2 classes specify the position of the individual grid items.
5. The justify-self: end; rule aligns the item2 to the right side of its grid area.