Tailwind CSS: Align an element to the left/right of its parent

Last updated on May 13, 2022 Pennywise Loading... Post a comment

In Tailwind CSS, you can align a child element to the left or right side of its parent div by using the mr-auto or ml-auto utility class, respectively (we also add the flex utility to the parent). This technique works well in both these situations:

  • The parent contains only a single child
  • The parent contains multiple child elements

An alternative way to achieve your goal is to use the float-left and float-right utilities (I personally prefer flex to float, but the choice is totally up to you).

For more clarity, let’s see the practical examples below.

Example 1


The code:

<body class="p-10">
    <div class="bg-sky-300 w-full">
        <div class="bg-amber-300 w-48 h-48 ml-auto p-10">Align Right</div>

Example 2

This example does the something but with float-right.


The code:

<body class="p-10">
    <div class="bg-green-500 w-full block">
        <div class="bg-amber-300 w-48 h-48 float-right p-10">Float Right</div>
        <div class="clear-both"></div>

That’s it. Continue learning more by taking a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

You May Also Like