How to Align to the right of an Image [Image Hosting Site]

I wanna align some text on the right side of an image to save space. Currently the text is below the image. Here is an example: http://imagechamp.com/gallery/done/106

I would love to be able to move those 3 text blocks to the right of the image to save some space. Here is the code I have, but I cant seem to get it right.

{include file="top.tpl"}

{include file="left.tpl"}

<script type="text/javascript">
LoadJScript( 'validate' );
LoadJScript( 'UploadValidate', 1 );
LoadJScript( 'advanced_upload' );
</script>

<!-- WYSIWYG_TOP_STRIP -->

<div class="content_container">
<div class="content_box_1">
{include file="header.tpl"}
<div class="content_bg">

<div id="content_position">
<br />
<div class="information">
<h5>VIEW UPLOADED FILES</h5>
{if $message}<br><font color="red">{$message}</font><br><br>{/if}

{section name=i loop=$catalog}
<div><a href="{$catalog.this_pic_url}" target="_blank"><img src="{$catalog.picture_preview}" border="0"></a><div>
<div>Link Only:<br /><textarea cols="70" rows="1" style="width:300px; hight:50px;" name="show{$catalog.id}">{$site_full_url}{$catalog.this_pic_url}</textarea></div>
<div><br>BBCode w/ Thumbail:<br /><textarea cols="70" rows="1" style="width:300px; hight:50px;" name="show{$catalog.id}">.this_pic_url}]</textarea></div>
<div><br>HTML w/ Thumbnail:<br /><textarea cols="70" rows="1" style="width:300px; hight:50px;" name="show{$catalog.id}"><a href="{$site_full_url}{$catalog.this_pic_url}" target=_blank><img src="{$catalog.picture_preview}" border="0"></a></textarea></div>
<br /><hr><br />
{/section}

</div>
</div>

</div>
</div>
</div>

<!-- WYSIWYG_BOTTOM_STRIP -->

{include file="right.tpl"}

{include file="bottom.tpl"}


Thanks in advance for all the help!!!!

 

You need to use the float:left; attribute. Also if you want all the 3 text boxes + text to be together at the side of your image you must div them together. Here is your corrected code:

<div class="content_container">
<div class="content_box_1">
{include file="header.tpl"}
<div class="content_bg">

<div id="content_position">
<br />
<div class="information">
<h5>VIEW UPLOADED FILES</h5>
{if $message}<br><font color="red">{$message}</font><br><br>{/if}

{section name=i loop=$catalog}
<div><a href="{$catalog.this_pic_url}" target="_blank"><img src="{$catalog.picture_preview}" border="0" style="float:left;"></a><div>

<div style="float:left;">
<div style="float:left;">Link Only:<br /><textarea cols="70" rows="1" style="width:300px; hight:50px;" name="show{$catalog.id}">{$site_full_url}{$catalog.this_pic_url}</textarea></div>
<div><br>BBCode w/ Thumbail:<br /><textarea cols="70" rows="1" style="width:300px; hight:50px;" name="show{$catalog.id}">.this_pic_url}]</textarea></div>
<div><br>HTML w/ Thumbnail:<br /><textarea cols="70" rows="1" style="width:300px; hight:50px;" name="show{$catalog.id}"><a href="{$site_full_url}{$catalog.this_pic_url}" target=_blank><img src="{$catalog.picture_preview}" border="0"></a></textarea></div>
</div>
<br /><hr><br />
{/section}

</div>
</div>

</div>
</div>
</div>

 

Close but that didn't do it.

Thanks for the effort.

 

useful entry.