left justify and right justify one element content in css

Question

I have an HTML code on inspect (as shown below) in which I want to left justify and right justify time element content in css.

HTML Code (On inspect):

<time datetime="00:15 02-08-2019" style="width:194px;" 
data-timezone="et">August 2 &nbsp;  &nbsp; 00:15</time>

The above inspect is generated from the following php code:

Php code:

<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) 
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php 
echo ucfirst(date_i18n( 'j F &\nb\sp; &\nb\sp; H:i', 
$ts->getTimeStamp()-(60*60*4))); ?></time>`

The above inspect html code belongs to the following screenshot:

Problem Statement:

I am wondering what CSS code I need to add so that I can left justify August 2 (which is already there) and right justify 00:15.

Archuleta

what does the html look like? if its wrapped in a div and both are spans you can use float: left, float: right – Embrasure

Within a single element---you can't. It's all treated as a single text-line. – Bufford

This is the html code on inspect <time datetime="00:15 02-08-2019" style="width:194px;" data-timezone="et">August 2 &nbsp; &nbsp; 00:15</time> – Archuleta

Without them being in separate containers you can't do this – Embrasure

@Archuleta 'j F &\nb\sp; &\nb\sp; H:i' in ucfirst(date_i18n( 'j F &\nb\sp; &\nb\sp; H:i', $ts->getTimeStamp()-(14400))); is your format string. It is essentially a template. <span>j F</span><span>H:i</span>', but you may need to escape the <span></span> parts. I don't know php well enough to tell you how to go about doing that. – Tiller

if you manage to put date and hour in two different <span>'s you could use: display: flex; justify-content: space-between; on their parent. – Wendelina

Answer 1

New answer

based on your new update and since you have control over the PHP code, you can simply split the date like below:

<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) 
?>"data-timezone="<?php echo esc_attr($tz_param) ?>"><?php 
echo ucfirst(date_i18n( 'j F', 
$ts->getTimeStamp()-(60*60*4))).'<span>'.date_i18n( 'H:i', 
$ts->getTimeStamp()-(60*60*4)).'</span>'; ?></time>`

And this will produce the following output:

time {
 display:inline-block;
}
time span {
  float:right;
}

<time datetime="00:15 02-08-2019" style="width:194px;" data-timezone="et">August 2<span>00:15</span></time>

Old answer

You can simulate this using word-spacing but you need to insert a special space between august and 2 called a fixed width space that doesn't get affected by word-spacing

time {
 border:1px solid;
 display:block;
 width:300px;
 word-spacing:190px;
}

<time datetime="00:15 02-08-2019"  data-timezone="et">August 2 00:15</time>
<time datetime="00:15 02-08-2019"  data-timezone="et">August&#x2002;2 00:15</time>

Word spacing algorithms are user agent-dependent. Word spacing is also influenced by justification (see the 'text-align' property). Word spacing affects each space (U+0020) and non-breaking space (U+00A0), left in the text after the white space processing rules have been applied. The effect of the property on other word-separator characters is undefined. However general punctuation, characters with zero advance width (such as the zero with space U+200B) and fixed-width spaces (such as U+3000 and U+2000 through U+200A) are not affected. ^ref

List of the spaces: http://jkorpela.fi/chars/spaces.html

Barringer

Thanks for this. It looks awesome. I am wondering how I can add a special space between august and 2called fixed width space. – Archuleta

Here is the php which is generating the html code on my question. <time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) ?>" data-timezone="<?php echo esc_attr($tz_param) ?>"><?php echo ucfirst(date_i18n( 'j F &\nb\sp; &\nb\sp; H:i', $ts->getTimeStamp()-(60*60*4))); ?></time> – Archuleta

Unfortunately, I can't change the html code which is on inspect. – Archuleta

@Archuleta try to insert the space between the j and F to replace the regular one you have, it can work – Barringer

hey friend, any idea regarding this issue?? – Baguette

@BugWhisperer sorry but if it's not about CSS I cannot help – Barringer

good answer - that I'm sure is a shocker to a few commentators. Though, as you said, user-agent dependent consideration to this. Since the OP will have to modify the ucfirst(date_i18n( ... )) output string anyhow, I would recommend they format\transpose that output altogether, and not just simply inject these special spaces. the result should support css and semantic web notions. – Tiller

@BrettCaswell I agree, I have also update my answer. Initially the question was completely different and dealing about only CSS but if he can manipulate the original PHP code then the trivial solution is to correctly generate the markup. – Barringer

@TemaniAfif I was going to edit your original answer with this suggestion, but it seems you updated it. I suggest you use Hex Code (like  ) instead of the encoded character, with your example – Tiller

Answer 2

span{
  float:right;
  }
  
 div{

 }

<div>
   <time datetime="00:15 02-08-2019"  data-timezone="et">
      August 2 
      <span> 00:15 </span>
   </time>
</div>

Woolridge

The html code is on inspect which I can't change. Here is the php which is generating the html code on my question. <time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) ?>" data-timezone="<?php echo esc_attr($tz_param) ?>"><?php echo ucfirst(date_i18n( 'j F &\nb\sp; &\nb\sp; H:i', $ts->getTimeStamp()-(60*60*4))); ?></time> – Archuleta

Yes I can what changes I need to do ? – Archuleta

break apart your date and add the span tag. Adjust css – Woolridge

Answer 3

There are multiple ways of achieving what you want using CSS, however all of them require you to at least wrap the "left" or "right" part in it's own container.

One option (as suggested by others) for this would be to use float like this:

PHP:

<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) ?>"data-timezone="<?php echo esc_attr($tz_param) ?>">
    <?php echo ucfirst(date_i18n('j F', $ts->getTimeStamp()-(60*60*4))); ?>
    <span><?php echo date_i18n('H:i', $ts->getTimeStamp()-(60*60*4))); ?></span>
</time>

CSS:

time > span {
    float: right;
}

If you would want to be clean, you should probably clear the float afterwards.

You could also use two <span> elements, one for the date and one for the time and then use display: flex; (to understand Flexbox, I'd recommend reading this article: https://css-tricks.com/snippets/css/a-guide-to-flexbox/) like this:

PHP:

<time style="width:194px;" datetime="<?php echo esc_attr(date_format($ts, 'H:i d-m-Y')) ?>"data-timezone="<?php echo esc_attr($tz_param) ?>">
    <span><?php echo ucfirst(date_i18n('j F', $ts->getTimeStamp()-(60*60*4))); ?></span>
    <span class="time-right"><?php echo date_i18n('H:i', $ts->getTimeStamp()-(60*60*4))); ?></span>
</time>

CSS: (Either use Option 1 or Option 2, not both)

/* OPTION 1 */
time {
    display: flex;
}

time > span {
    flex-grow: 1;
}

time > span.time-right {
    text-align: right;
}

/* OPTION 2 */
time {
    display: flex;
    justify-content: space-between;
}

/* Note: There are many more options achieving this using flex */

You could also use relative and absolute positioning for this, by giving the <time> element a position: relative and the <span> a position: absolute; right: 0;

Doubleteam