How do you Style Number Suffix

HTML & CSS
1

I’m working with a list that uses php to display a date for which the item in the list was added. I have the date displayed using php as follows
Display the Day number and suffix with the suffix nested within the day div:

<div class="day"><?php time('d'); ?><div class="suff"><?php time('S'); ?></div></div>

I need the suffix to hang next to the day number and float as the number is grows from single digit to double.
Here is the css I’m using but it’s just not working.

.day {
    position:relative;
    margin: 8px auto 0 auto;
    overflow: hidden;
    font-size: 18px;
    line-height: 75%;
    letter-spacing: 2px;
    text-align: left;
    width: 45px;
    min-width: 35px;
    /*background-color: white;*/
    /*color: #000;
    text-shadow: 1px 1px 2px #ccffcc;*/border:1px solid red;
}
.suff {
    position:relative;
    font-size: 13px;
    line-height: 65%;
    text-align: left;
    text-decoration: underline;
    border: 1px solid red;
    float:right;
}

Thanks for any help

2

Hi, you display the first part of the date without any sort of parent wrapping around it. Wrap the
<?php time(‘d’); ?>

In a <p> or something (some sort of element)and then float that left :slight_smile:

Floats must come first in the HTML.

3

Works Great!
Thank you

4

Glad it helped ;). You’re welcome.