CODEWITHSUNDEEP
htmlcss
user2746271
user2746271

Reputation: 21

How to position an image in the bottom right corner of a frame?

On the this page (Roman Umismatics), I would like to position the yellow 'bid' button at the bottom right of the individual frames.

Current code

<p><a href="<?= $product->page_url() ?>"><img border="0" alt="Bid" src="/themes/roma/resources/img/bid.png" style="margin:0" /></a></p>

What code do I need to change to do achieve this?

Upvotes: 2

Views: 1498

Answers (6)

Jen
Jen

Reputation: 1733

This tutorial will help:

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

When you set a parent to position: relative, you may then use absolute positioning on children, in relation to that container.

<div class="parent">
 <a class ="child" href="<?= $product->page_url() ?>"><img border="0" alt="Bid" src="/themes/roma/resources/img/bid.png" style="margin:0" /></a>
</div>

In your CSS:

.parent { position:relative; }
.child { display:inline-block; position:absolute; bottom:0; right:0; }

Upvotes: 0

Suresh Pattu
Suresh Pattu

Reputation: 6209

your html is:

<p><a href="/auction/lot/0003" class="actionBtn"><img border="0" alt="Bid" src="/themes/roma/resources/img/bid.png" style="margin:0;"></a></p>

CSS:

.actionBtn{float:right;}

Upvotes: 0

RbG
RbG

Reputation: 3193

p{
   float:right:
   margin-top:10px;
 }

Upvotes: 0

OJay
OJay

Reputation: 4921

make the container element

.breakl

position: relative;

and make the bid button

position: absolute;
right: 0;
bottom: 0;

Upvotes: 2

Elmer
Elmer

Reputation: 259

simply add 'float:right;' to the image.

Upvotes: 0

Dipesh Parmar
Dipesh Parmar

Reputation: 27354

Add Class for the paragraph and float that paragraph to the right.

That will work.

<p class="alignright">

.alignright { float: right; }

Upvotes: 2

Related Questions