Question

I am using XSLT to transform XML into HTML. In the below code, I am trying to display the width of the bar at the end of the bar i.e right side. But due to the div tag used to create the bar, the value is moving to the next line as shown in the attached graphic. Please help in placing it towards right.

<xsl:for-each select="catalog/cd/price">
Current node:
<xsl:variable name="maxbars" select="."/>
<div style="width: {$maxbars}%; height: 18px; background-color: blue"></div>
<xsl:value-of select="."/>
<br>
</xsl:for-each>


<catalog>
<cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
</cd>

Answer 1

use float:left for the DIV and remove <br> –

<div style="width: {$maxbars}%; height: 18px; background-color: blue; float: left;"></div>
<xsl:value-of select="."/>

</xsl:for-each>


<catalog>
<cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
</cd>