Right Floating Images

Below is a working example of this template.
You'll find simple instructions of how to use it beneath it.
This particular template does not provide any interaction with its user. However, if you would like to add a link to any of the images or text, you can do so in the editor after following the directions below.

You can customize:
  • Images
  • Text
You cannot customize:
  • Image size
  • Layout
  • Spacing between images


Note: for images to display properly in this template, use these sizes:
  • width: 200px
  • height: 134px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in pulvinar tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus varius ornare arcu, eleifend mollis leo ornare fermentum. Sed vitae arcu in tortor vestibulum varius. Nam a malesuada quam. Etiam at arcu et elit posuere vulputate et elementum tellus. Aenean dictum urna nec mauris vulputate facilisis. Nulla cursus imperdiet elit, auctor lacinia dolor porttitor varius. Donec at facilisis lacus. Vivamus ac elit lorem. Sed semper tortor eu odio posuere vestibulum.

Nullam gravida, enim eu interdum porta, massa sapien ornare magna, condimentum pulvinar metus ante id mi. Aliquam vel mi magna. Maecenas posuere, elit sed commodo bibendum, orci turpis commodo dui, ac lacinia tortor diam nec arcu. Nunc at dolor urna. Praesent adipiscing, diam nec facilisis condimentum, risus leo consectetur metus, eu feugiat turpis nunc ac dui. Suspendisse gravida volutpat felis, a vehicula lorem scelerisque eu. Nunc scelerisque ante non nisl bibendum fringilla. Quisque condimentum faucibus sapien nec porttitor. Nunc ornare ornare pellentesque. Suspendisse id sodales ligula.

Nulla varius nibh ut ante lobortis convallis. Ut ultricies, nibh eu cursus rhoncus, urna leo consectetur leo, eget congue tortor sem vitae orci. Integer vel nibh mauris, ut tempor ante. Sed a ornare erat. Duis facilisis lorem non libero adipiscing euismod ipsum non sem feugiat a consequat erat egestas. Pellentesque laoreet risus purus. Praesent auctor, odio eu bibendum. Aliquam molestie neque nec libero hendrerit adipiscing lacinia tellus fermentum. Duis commodo ultricies congue. Mauris consectetur consectetur, leo metus sodales lacus, cursus molestie orci neque et nisi. Nunc nibh libero, mollis id iaculis lacinia, tempor sed urna. Duis dictum, augue malesuada dignissim consectetur, purus erat pharetra velit, sit amet accumsan mauris orci nec erat. Quisque at dolor ut neque volutpat porttitor. Quisque at dolor ut neque volutpat porttitor.Quisque at

Sed iaculis congue ligula, non luctus tellus tempor quis. Vivamus in ante urna. Nulla et mi ipsum, eu pulvinar ligula. Donec tincidunt sodales massa, sed sodales lorem pretium id. Curabitur semper tempor dui, et ornare mi auctor in. Vivamus non eros ac metus malesuada venenatis. Integer eget diam ut eros consectetur ornare id at massa. Nulla bibendum dolor sit amet magna aliquam venenatis. Fusce vestibulum, risus et sagittis tristique, massa turpis fringilla libero, nec cursus risus justo eget mi.

Aenean diam lectus, facilisis sit amet porttitor a, euismod nec enim. Nam scelerisque nibh sed lacus fringilla dignissim laoreet et ipsum. Donec tristique iaculis eros id porttitor. Pellentesque eget leo ac risus tempus fermentum at sed massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis est mi, vulputate ac dignissim vel, imperdiet vel arcu. Phasellus vehicula, lacus in vestibulum suscipit, metus nibh ultricies dolor, ut elementum purus sem vitae odio.

Instructions:

  1. Copy the code below.
  2. Find page in Ingeniux you want to use this template on.
  3. Click 'HTML'.
  4. Paste the code you copied in step 1.
  5. Click 'Update'.
  6. Customize the image sources, link, text, etc.
        <div id="tempexample">
            <style>
                #container710{
                    overflow:auto;
                    text-align: justify;
                    width:710px;
                }
                .gallerybox{
                    -moz-box-shadow: 0px 0px 5px #000000;
                    -webkit-box-shadow: 0px 0px 5px #000000;
                    box-shadow: 0px 0px 5px #000000;
                    border:1px solid #777777;
                    overflow:auto;
                    padding:10px;
                    margin:4px;
                }
                .picbox{
                    background-color:lightblue;
                    margin:0px 5px;
                    float:left;
                    width:218px;
                    height:200px;
                    border: 1px solid #787878;
                }
                img{
                    padding:0px;
                    margin:10px 0px 5px 15px;
                    border:none;
                    float:left;
                }
                .picboxfirst{
                    margin-left:0px;
                    padding-left:0px;
                }
                .picboxlast{
                    margin-right:0px;
                    padding-right:0px;
                }
                #floatingpicture{
                    float:right;
                }
            </style>
            <div id="container710" class="span-18">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                    Curabitur in pulvinar tortor. Cum sociis natoque penatibus
                    et magnis dis parturient montes, nascetur ridiculus mus. 
                    Vivamus varius ornare arcu, eleifend mollis leo ornare fermentum. 
                    Sed vitae arcu in tortor vestibulum varius. Nam a malesuada
                    quam. Etiam at arcu et elit posuere vulputate et elementum 
                    tellus. Aenean dictum urna nec mauris vulputate facilisis. 
                    Nulla cursus imperdiet elit, auctor lacinia dolor porttitor 
                    varius. Donec at facilisis lacus. Vivamus ac elit lorem. Sed 
                    semper tortor eu odio posuere vestibulum.
                </p><p>
                    Nullam gravida, enim eu interdum porta, massa sapien ornare 
                    magna, condimentum pulvinar metus ante id mi. Aliquam vel mi
                    magna. Maecenas posuere, elit sed commodo bibendum, orci 
                    turpis commodo dui, ac lacinia tortor diam nec arcu. Nunc 
                    at dolor urna. Praesent adipiscing, diam nec facilisis 
                    condimentum, risus leo consectetur metus, eu feugiat turpis
                    nunc ac dui. Suspendisse gravida volutpat felis, a vehicula 
                    lorem scelerisque eu. Nunc scelerisque ante non nisl bibendum
                    fringilla. Quisque condimentum faucibus sapien nec porttitor.
                    Nunc ornare ornare pellentesque. Suspendisse id sodales ligula.
                </p>
                <p>
                    Nulla varius nibh ut ante lobortis convallis. Ut ultricies,
                    nibh eu cursus rhoncus, urna leo consectetur leo, eget congue 
                    tortor sem vitae orci. Integer vel nibh mauris, ut tempor ante.
                    Sed a ornare erat. Duis facilisis lorem non libero adipiscing 
                    euismod ipsum non sem feugiat a consequat erat egestas. 
                    <span id="floatingpicture">
                        <img src="http://www.metroforestry.com/resources/RoadsideTrees1.jpg" width="200" height="134"/>
                        <img src="http://images3.wookmark.com/68945_fall-yellow-trees.jpg" width="200" height="134"/>
                    </span>
                    Pellentesque laoreet risus purus. Praesent auctor, odio eu
                    bibendum. Aliquam molestie neque nec libero hendrerit adipiscing 
                    lacinia tellus fermentum. Duis commodo ultricies congue. Mauris
                    consectetur consectetur, leo metus sodales lacus, cursus 
                    molestie orci neque et nisi. Nunc nibh libero, mollis id 
                    iaculis lacinia, tempor sed urna. Duis dictum, augue malesuada 
                    dignissim consectetur, purus erat pharetra velit, sit amet 
                    accumsan mauris orci nec erat. Quisque at dolor ut neque volutpat porttitor. Quisque at dolor ut neque volutpat porttitor.Quisque at
                </p><p>
                    Sed iaculis congue ligula, non luctus tellus tempor quis. 
                    Vivamus in ante urna. Nulla et mi ipsum, eu pulvinar ligula.
                    Donec tincidunt sodales massa, sed sodales lorem pretium id.
                    Curabitur semper tempor dui, et ornare mi auctor in. Vivamus
                    non eros ac metus malesuada venenatis. Integer eget diam 
                    ut eros consectetur ornare id at massa. Nulla bibendum dolor 
                    sit amet magna aliquam venenatis. Fusce vestibulum, risus et 
                    sagittis tristique, massa turpis fringilla libero, nec cursus 
                    risus justo eget mi.
                </p><p>
                    Aenean diam lectus, facilisis sit amet porttitor a, euismod
                    nec enim. Nam scelerisque nibh sed lacus fringilla dignissim 
                    laoreet et ipsum. Donec tristique iaculis eros id porttitor. 
                    Pellentesque eget leo ac risus tempus fermentum at sed massa.
                    Vestibulum ante ipsum primis in faucibus orci luctus et 
                    ultrices posuere cubilia Curae; Duis est mi, vulputate ac 
                    dignissim vel, imperdiet vel arcu. Phasellus vehicula, lacus 
                    in vestibulum suscipit, metus nibh ultricies dolor, ut 
                    elementum purus sem vitae odio.                
                </p>
            </div>
        </div>