W3docs
en
Log in

How to Align the <span> Element to the Right of the <div>

Find out how to align a <span> element to the right of the <div> element in this tutorial. We’ll explain how you can do this with the CSS float property.

Tags

Solutions with CSS properties

If you want to align a <span> element to the right of the <div>, you can use some CSS. Particularly, you can use the flex or float property.

Now, we’ll demonstrate an example and then explain it.

Example of aligning a <span> to the right of the <div> element with the CSS flex property:

Example of aligning a <span> within the <div> element using CSS flex property

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title {
        display: flex;
        justify-content: space-between;
        border-top: 5px solid #969696;
        background-color: #76db95;
        height: 30px;
        line-height: 30px;
        padding: 5px 15px;
        font-size: 18px;
        color: #212121;
        margin-bottom: 20px;
      }
    </style>
  </head>
  <body>
    <div class="title">
      <span>Example</span>
      <span>05.05.2020</span>
    </div>
  </body>
</html>
Try it Yourself »

In this example, we apply display: flex to the parent <div> and use justify-content: space-between. This property distributes the <span> elements along the horizontal axis, pushing the first one to the far left and the second one to the far right.

Example of aligning a <span> to the right of the <div> element using the legacy float property:

Example of aligning a <span> to the right of the <div> element:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .title {
        display: block;
        border-top: 5px solid #969696;
        background-color: #76db95;
        height: 30px;
        line-height: 30px;
        padding: 4px 6px;
        font-size: 16px;
        color: #000000;
        margin-bottom: 13px;
        clear: both;
      }    
      .title .date {
        float: right;
      }      
      .title .name {
        float: left;
      }
    </style>
  </head>
  <body>
    <div class="title">
      <span class="name">Example</span>
      <span class="date">05.05.2020</span>
    </div>
  </body>
</html>
Try it Yourself »

In our example, we have a <div> tag with two <span> elements. We applied the float property with the “right” value to the “date” class and the “left” value to the “name” class of the <span> elements. Also, we used the clear property with the “both” value on the "title" class to ensure that any content following this <div> does not wrap around the floated elements.

So, in this way you can align the <span> within the <div> element to the right.