Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Move</p> <pre><code>&lt;div id="medal"&gt;&lt;img src="images/star2012medal.png" width="220" height="277"&gt;&lt;/div&gt; </code></pre> <p>inside</p> <pre><code>&lt;div id="box"&gt;&lt;img src="images/boxheading.png"&gt;&lt;/div&gt; </code></pre> <p>just before the image.</p> <p>Change the <code>CSS</code> to</p> <pre><code>#medal { position: relative; top: -240px; right: -80px; z-index: 50; } </code></pre> <p>and apply the following to the <code>boxheading.png</code> image</p> <pre><code>{ position: relative; top: -280px; } </code></pre> <p><strong>EDIT:</strong></p> <p><em>From what I feel you are trying to achieve, you should be looking at a 2-column layout. There's too many good-practice resources online to learn how to do it.</em></p> <p>To add another box below the first one, you will need to do the following changes to <code>html</code>:</p> <pre><code>&lt;div id="box-container"&gt; &lt;div id="box"&gt; &lt;div id="medal"&gt; &lt;img src="images/star2012medal.png" width="220" height="277"&gt; &lt;/div&gt; &lt;img src="images/boxheading.png" width="291px" height="240px" style="position: relative; top: -280px; "&gt; &lt;/div&gt; &lt;div id="box2"&gt;testing&lt;/div&gt; &lt;/div&gt; </code></pre> <p>then add the following <code>css</code>:</p> <pre><code>#box-container { float: right; } #box { float: left; color: #333; background: #fff; height: 240px; width: 291px; display: inline; border-style: solid; border-color: #fff100; -moz-border-radius: 10px; border-radius: 10px; clear: both; } #box2 { float: left; color: #333; background: #fff; height: 240px; width: 291px; display: inline-block; border-style: solid; border-color: #fff100; -moz-border-radius: 10px; border-radius: 10px; clear: both; margin-top: 10px; } </code></pre> <p><em>tested only in Chrome. Remember to test it in other browsers!</em></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload