techguy2000 techguy2000 - 7 months ago 5
HTML Question

How to align a "column" of spans to the right?

I can't use divs. All I can use is spans. Here is my fiddle: http://jsfiddle.net/f6a01v9a/1/



<h4>How to align first "column" of spans to the right?:</h4>
<span style="float: left; width: 100px">Title1:</span><span>456415446</span>
<br/>
<span style="float: left; width: 100px">Long Title2:</span><span>16546446</span>

<br/><br/><hr>

<h4>Example (UI only. Code is not right):</h4>
<span style="float: left; width: 64px; padding-left: 36px">Title1:</span><span>456415446</span>
<br/>
<span style="float: left; width: 100px">Long Title2:</span><span>16546446</span>





How can I align the first "column" of spans to the right regardless of size of text?

Updated:
Thanks guys! Such a simple issue. I was stuck on float and missed out text-align.

Answer

Set text-align to right, with some padding-right value.

<h4>How to align first "column" of spans to the right?</h4>
<span style="float: left; width: 100px; text-align: right; padding-right: 10px;">Title1:</span><span>456415446</span>
<br/>
<span style="float: left; width: 100px; text-align: right; padding-right: 10px;">Long Title2:</span><span>16546446</span>