Float right text not lining up correctly

[Matte]

I combined my "replies" and "views" columns into one, with the descriptor floating left and the count floating right. The problem is, I can only get it to line up correctly with "views" on the top and "replies" on the bottom, but I want it the opposite way. Here's a comparison of what works (left) and what happens when I try to swap the order (right):





The code I'm using for the left image:

<td class="activity"><span style="font-size:80%; color:#999999;"><span style="float:left;">Views:</span><span style="float:right;">$[thread.views]</span></span><br /><span style="float:left;">Replies:</span><span style="float:right;">$[thread.replies]</span></td>

Code I try using for the right image:

<td class="activity"><span style="float:left;">Replies:</span><span style="float:right;">$[thread.replies]</span><br /><span style="font-size:80%; color:#999999;"><span style="float:left;">Views:</span><span style="float:right;">$[thread.views]</span></span></td>

[Retread]

Hi Matte

I don't know enough about it to say why there is a difference when you change the sequence. But in my experience, I've found that whenever having issues with floats it's safest to use an empty element with a style attribute so the previous floats can be cleared. We could use an empty div:
<div style="clear:both;></div>
But since you already have a <br /> we could use that to clear the floats.
<br / style="clear:both;">

I've added indentation as well as adding the style attribute to your break so it's a bit easier to keep track of the hierarchy of the elements. Give this a try:

       <td class="activity">
           <span style="float:left;">Replies:</span>
           <span style="float:right;">$[thread.replies]</span>
           <br / style="clear:both;">
           <span style="font-size:80%; color:#999999;">
               <span style="float:left;">Views:</span>
               <span style="float:right;">$[thread.views]</span>
           </span>
       </td>

[Matte]

Thanks, Retread! Your code works perfectly. Clearing the floats is something I had no idea about. Good to know!

[Nscalerr]

Btw the br tag should be <br style="clear: both" />.

[Kami]

May 30, 2021 10:59:05 GMT -8 Nscalerr said:

Btw the br tag should be <br style="clear: both" />.

you don't actually need to close empty tags in HTML5 (br, img, etc) so you can leave off the forward slash entirely.

also, Retread — clear:both is for preventing floating elements on either side of the specified element & semantically means to start a new row / line of content. by using clear:both on an element following two floating elements, you ensure that the content floats on the singular row instead of attempting to float with every other preceding element. there are multiple ways to clear (eg: inherit, or if you only have left float, left) so in this case "both" was appropriate as left and right were used, but should be mindful moving forward to use the appropriate value.

[Retread]

May 30, 2021 11:22:58 GMT -8 Kami said:

also, Retread — clear:both is for preventing floating elements on either side of the specified element & semantically means to start a new row / line of content. by using clear:both on an element following two floating elements, you ensure that the content floats on the singular row instead of attempting to float with every other preceding element. there are multiple ways to clear (eg: inherit, or if you only have left float, left) so in this case "both" was appropriate as left and right were used, but should be mindful moving forward to use the appropriate value.

I'm not sure what you meant to say, but what you did say implies there might be an issue clearing both if only one of float:left or float:left float:right had been used. That simply isn't the case when we want to start fresh and disrespect any (and all) previous floats.

[Kami]

May 31, 2021 3:41:22 GMT -8 Retread said:

May 30, 2021 11:22:58 GMT -8 Kami said:

also, Retread — clear:both is for preventing floating elements on either side of the specified element & semantically means to start a new row / line of content. by using clear:both on an element following two floating elements, you ensure that the content floats on the singular row instead of attempting to float with every other preceding element. there are multiple ways to clear (eg: inherit, or if you only have left float, left) so in this case "both" was appropriate as left and right were used, but should be mindful moving forward to use the appropriate value.

I'm not sure what you meant to say, but what you did say implies there might be an issue clearing both if only one of float:left or float:left float:right had been used. That simply isn't the case when we want to start fresh and disrespect any (and all) previous floats.

i had a lengthier post typed up to this (sorry if you already saw it) but i've decided to remove it. i'll defer to your expertise here. my apologies for interfering unnecessarily, it won't happen again.

[Retread]

May 31, 2021 4:37:33 GMT -8 Kami said:

i had a lengthier post typed up to this (sorry if you already saw it) but i've decided to remove it.

I did see it and considered replying to it. But we both would have added a lot of unnecessary clutter. Glad to avoid that. ☮️