How would you position these images?

Question

http://elektrikhost.com/

You see the penguins thats over the header on the columns? I'm trying to get them to be over the header and list. I'm wondering what would you do? use position absolute, or relative? I'm stuck.

HTML:

<section class="starter">
 <img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon">
  <h2>Starter Plan</h2>
  <ul>
    <li><span>5GB Disk Space</span></li>
    <li><span>Unmetered Bandwidth</span></li>
    <li><span>Unlimited Add-on Domains</span></li>
    <li><span>Unlimited Subdomains</span></li>
    <li><span>Unlimited Email/FTP Accounts</span></li>
    <li><span>Unlimited MySQL Databases</span></li>
    <li><span>Shell access upon request</span></li>
  </ul>
  <img src="images/starterplan.png" width="192" height="51" alt="Starter Plan">
</section><!-- //.starter -->

.plan-icon is the image. Needs to look like this:

Answer 1

try

<img src="../images/plan-icon.png" width="62" height="73" alt="Plan Icon" style="float:right;">

I might even suggest adding a padding: 5px 5px; to that, but that's just me ...

Answer 2

.starter { position: relative; }
.starter img { position: absolute; top: 5px; left: 140px; }

The idea is that the image is positioned "absolute" so it can be anywhere within the confines of its parent element ".starter". This will not work if ".starter" is not set to relative.

I got this to work in Firebug, the .starter img selector might need changing but its the idea of absolute positioning that you should take away from this.

Answer 3

Use relative positioning. You can also give it a z-index to place it "on top" of any elements.

Regardless, take a look at this page. It should help you out:

http://w3schools.com/CSS/css_positioning.asp

Answer 4

You can simply set the image style to float: right

Answer 5

If it were me, I'd add this CSS.

#plans-wrap section { position: relative; }
#plans-wrap section  .icon { position: absolute; right: 0px; top: 0px; }