Image positioning problem

[debbie-g85]

Hi I am new to CSS and I am having trouble positioning a small image to the corner of its div container.

So far the only way I have managed is to put the image in html and give its own div container and then use:

{position:relative; right:-12px; top:-30px; }

The problem with this is that its making a complete mess of everything else on the page. The rest of the page treats the image as if it were in the original position - so text is wrapping around a blank space.

Basically...
How do I change this:


Into this:


This is CSS for it so far:

.box { 
    background: #f4f4f4 url(./img/ticketicon.png) no-repeat right bottom;
    border: 1px solid #ccc;
    color: #505050;
    line-height: 1.5em;
	margin: 0 0 20px;
    padding: 10px;
	}

How would I use something like the position:relative extract above in this?

Many thanks

[itivae]

Give the image its own div and then use the float function. ie float:right; Then use pad for position. Thats a pretty general answer...if you have it live and want to post a link I'm sure someone could give you some more precise help.

[FrankC]

Without code or live object it's difficult to give advice, but here's a tutorial on positioning in CSS in general: How to Position in CSS (http://www.website-laten-maken-amsterdam-nh.nl/blog/how-to-position-divs-with-css.php) . It covers all four methods.