HTML styling: unable to right-align the second half of a line

Question

I am automating the conversion of a latex index to HTML and the code I generate looks like this:

<div style="float:left;">
    Abricots à la Colbert
    <a style="float:right" href="../text/ch005.xhtml#ix1941">1941</a>
</div>

Unfortunately this does not work: the '1941' page number does not float to the right of the page. The entire line is left aligned and the page number is displayed immediately after the 't' of Colbert with no intervening space.

On the other hand if I code something such as this:

<div style="text-align:left;">
This text is left aligned
<span style="float:right;">
    This text is right aligned
</span>
</div>

...everything works as expected.

Anyone could explain why?

What would be the correct way to code this?

Answer 1

I think that you place your whole div on the left and then since the a tag is inside the div, you want to place it to the right. You can try something like this:

 <div>
   <div style="float:left;">
      Abricots à la Colbert
   </div>
   <div style="float:right;">
      <a style="float:right" href="../text/ch005.xhtml#ix1941">1941</a>
   </div>
</div>