Alignment

Hey, fairly basic question, hope this is the right section. Basically I have some code, whereby if someone hovers over a text such as service 1..it will display the corresponding text..or image or some sort etc and change once the next text is hoevered over..I basically want the text/image aligned to the right so it's:

Service 1
Service 2 Image/text Here
Service 3 etc

however at the moment it's displaying at the bottom like so:

Service 1
Service 2
Service 3 etc

Image/text Here

<script>

var content=new Array()

content[0]='<img src="images/header/a1.png" border="0" alt="main" width="300" height="250" />'
content[1]='Service 2'
content[2]='Service 3'
content[3]='Service 4'
content[4]='Service 5'
content[5]='Service 6'
content[6]='Service 7'
content[7]='Service 8'
content[8]='Service 9'

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
appear()
setTimeout("window.onresize=regenerate",450)
}
}

function changetext(whichcontent){

if (document.all||document.getElementById){
cross_el=document.getElementById? document.getElementById("descriptions"):document.all.descriptions
cross_el.innerHTML='<font face="Verdana"><small>'+whichcontent+'<font></small>'
}
else if (document.layers){
document.d1.document.d2.document.write('<font face="Verdana"><small>'+whichcontent+'</small></font>')
document.d1.document.d2.document.close()
}

}

function appear(){
document.d1.visibility='show'
}

window.onload=regenerate2


//-->
</script>

<div id="scriptmenu" style="line-height:20px"><p><strong><font
            face="Verdana"><a href="../dynamicindex1/index.html" onMouseover="changetext(content[0])"><small>Service 1</small></a><br />
            <a href="../dynamicindex3/index.html" onMouseover="changetext(content[1])"><small>Service 2</small></a><br />
            <a href="../dynamicindex2/index.html" onMouseover="changetext(content[2])"><small>Service 3</small></a><br />
            <a href="../dynamicindex4/index.html" onMouseover="changetext(content[3])"><small>Service 4</small></a><br />
            <a href="index.html" onMouseover="changetext(content[4])"><small>Service 5</small></a><br />
            <a href="../dynamicindex6/index.html" onMouseover="changetext(content[5])"><small>Service 6</small></a><br />
            <a href="../dynamicindex10/index.html" onMouseover="changetext(content[6])"><small>Service 7</small></a><br />
            <a href="../dynamicindex8/index.html" onMouseover="changetext(content[7])"><small>Service 8</small></a><br />
            <a href="../dynamicindex11/index.html" onMouseover="changetext(content[8])"><small>Service 9</small></a></font></strong></p>
</div>

<ilayer id="d1" width="200" height="200" visibility="hide">
<layer id="d2" width="200" height="200">
<div id="descriptions" align="left">

Welcome Testing...


</div>
</layer>
</ilayer>

Code (markup):

 

you need to enclose each row of data into its unique div with another div inside it for the hover content to display from with this hover div id set to a unique value for each row as well usually a item id is used.

if you do not use a unique value it will only display once or it will display all the hover values at once.

Then you need to float the hover display data left in your main div.