What is the best way to position this span on the right side of the div?

Question

What is the best way to position this span on the right side of the div?

Here is some HTML code snippet:

<div class="title">
    <span>Cumulative performance</span>
    <span>20/02/2011</span>
</div>

This is the corresponding CSS:

.title
{
    display: block;
    border-top: 4px solid #a7a59b;
    background-color: #f6e9d9;
    height: 22px;
    line-height: 22px;
    padding: 4px 6px;
    font-size: 14px;
    color: #000;
    margin-bottom: 13px;
    clear:both;
}

In a jsFiddle linked here: open link to view

The issue I am facing is that the Title and Date are not aligned properly. Is there any solution to make the date align to the right? I attempted using float: right; on the second  but it affected the layout and pushed the date outside of the div container.

html css

Answer 1

Answer №1

If you have the ability to make changes in the HTML, take a look at this example

<div class="header">
  <span class="title">Overall progress</span>
  <span class="date">15/07/2014</span>
</div>

.header .date { float:right }
.header .title { float:left }

Answer 2

If you have the ability to make changes in the HTML, take a look at this example

<div class="header">
  <span class="title">Overall progress</span>
  <span class="date">15/07/2014</span>
</div>

.header .date { float:right }
.header .title { float:left }

Answer 3

Answer №2

Dealing with floats can get a little messy:

Many 'simple' layout tricks like this can actually be achieved using flexbox.

   div.container {
     display: flex;
     justify-content: space-between;
   }

In my opinion, in 2017 using flexbox is the preferred solution (compared to floats) if you don't need to support older browsers: https://caniuse.com/#feat=flexbox

Take a look at this fiddle to see how different float techniques stack up against flexbox ("may include some competing answers"): https://jsfiddle.net/b244s19k/25/. If you still need to use float, I recommend the third version.

Answer 4

Dealing with floats can get a little messy:

Many 'simple' layout tricks like this can actually be achieved using flexbox.

   div.container {
     display: flex;
     justify-content: space-between;
   }

In my opinion, in 2017 using flexbox is the preferred solution (compared to floats) if you don't need to support older browsers: https://caniuse.com/#feat=flexbox

Take a look at this fiddle to see how different float techniques stack up against flexbox ("may include some competing answers"): https://jsfiddle.net/b244s19k/25/. If you still need to use float, I recommend the third version.

Answer 5

Answer №3

Instead of relying on floats, another approach is to utilize absolute positioning:

.header {
  position: relative;
}

.header span:last-of-type {
  position: absolute;
  right: 8px;   /* should match parent's right padding */
}

For a live example, check out this fiddle.

Answer 6

Instead of relying on floats, another approach is to utilize absolute positioning:

.header {
  position: relative;
}

.header span:last-of-type {
  position: absolute;
  right: 8px;   /* should match parent's right padding */
}

For a live example, check out this fiddle.

Answer 7

Answer №4

Implementing flexbox layout without the use of justify-content: space-between.

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

By applying flex:1 to the first , it fills up the remaining space and shifts the second  to the right. Check out the working example here: https://jsfiddle.net/2k1vryn7/

To compare two different ways of using flexbox, visit this link: https://jsfiddle.net/7wvx2uLp/3/. It demonstrates the difference between flexbox with justify-content: space-between and flexbox with flex:1 on the first .

Answer 8

Implementing flexbox layout without the use of justify-content: space-between.

<div class="title">
  <span>Cumulative performance</span>
  <span>20/02/2011</span>
</div>

.title {
  display: flex;
}

span:first-of-type {
  flex: 1;
}

By applying flex:1 to the first , it fills up the remaining space and shifts the second  to the right. Check out the working example here: https://jsfiddle.net/2k1vryn7/

To compare two different ways of using flexbox, visit this link: https://jsfiddle.net/7wvx2uLp/3/. It demonstrates the difference between flexbox with justify-content: space-between and flexbox with flex:1 on the first .

Answer 9

Answer №5

You have the ability to achieve this task without making any changes to the original html code. http://jsfiddle.net/9KdpX/2356/

<div class="heading">
<h2>Overall progress</h2>
<p>03/12/2013</p>
</div>

.heading h2:nth-of-type(1) { float:right }
.heading p:nth-of-type(2) { float:left }

Answer 10

You have the ability to achieve this task without making any changes to the original html code. http://jsfiddle.net/9KdpX/2356/

<div class="heading">
<h2>Overall progress</h2>
<p>03/12/2013</p>
</div>

.heading h2:nth-of-type(1) { float:right }
.heading p:nth-of-type(2) { float:left }

Answer 11

Answer №6

ul, ol { /** styles for both ul and ol elements **/
    list-style: none; /** removes bullet points/numbering **/
    padding-left: 0px; /** removes actual indentation **/
}

Answer 12

ul, ol { /** styles for both ul and ol elements **/
    list-style: none; /** removes bullet points/numbering **/
    padding-left: 0px; /** removes actual indentation **/
}

What is the best way to position this span on the right side of the div?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

List arranged in order with a hyperlink in the center and an image positioned on the right side

Top tips for optimizing HTML and utilizing div elements

Avoiding the collapse of the Bootstrap 4 navbar

Modifying the overflow behavior within a Vuetify dialog

Create a full bottom shadow for a circular shape using CSS 3

Develop a dynamic webpage using ASP.NET for enhanced interactivity

Is it possible to insert clickable links within the content of a Twilio text message?

Customizing Mouse Pointers in CSS

Ways to prioritize the parent element's style over the child element's style attribute

Creating a sleek navigation bar and sliding feature within the header of your Ionic 2

error displays stating that the module '../util/http_util' cannot be located

Is it possible that smarty assigns but doesn't execute the code?

What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

Ways to verify the application of CSS hyphens using Chrome's developer tools

What are the possibilities for modifying a MySQL database using HTML?

Issue with calling a function to change the CSS color class of a button in Angular

Creating rounded buttons with Font Awesome icons and hover effects

Is there a way to streamline the process of uploading an image and storing its details in a single HTML form with just one submit button?

Utilizing Bootstrap 4 columns to control the height of a separate column