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

Discussion in 'HTML & Website Design' started by mixers30, Mar 27, 2009.

  1. #1
    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}][​IMG]</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!!!!
     
    mixers30, Mar 27, 2009 IP
  2. Oxi

    Oxi Peon

    Messages:
    78
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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}][​IMG]</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>
     
    Oxi, Mar 27, 2009 IP
  3. mixers30

    mixers30 Greenhorn

    Messages:
    56
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    18
    #3
    Close but that didn't do it.

    Thanks for the effort.
     
    mixers30, Mar 27, 2009 IP
  4. hddoctor

    hddoctor Peon

    Messages:
    11
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    useful entry.
     
    hddoctor, Mar 27, 2009 IP