Hi,

Just in time for some festive fun I have revived this little quiz for a simple one-off test that i hope you find interesting and maybe challenging.

Some of you will know the answer to this straight away so please PM me your answer and do not post in the thread and spoil it for others. There are no prizes but I will announce the first correct entries that I receive to give you some self-smug congratulations at least.

The test sounds very simple but will require a little bit of lateral thinking and there may indeed be a number of solutions. All I want you to do is to place the image supplied 50px inside the right edge of a container using only the html that I supply. (I will also supply minimal css that must remain in effect.)

You cannot alter the html and you can only use valid css2.1 to achieve the result (no javascript or browser tricks just valid css2.1). Although it sounds simple you are not allowed either to put the image in your paint package and add 50px padding to it. The container that this image is placed in is a fluid width so you can't place it xxpx from the left to move it into position. Therefore you can't place it at xx% either as that will change when the window is resized.

To make it easier I only need the example to work in Firefox and Opera (recent versions) but it must work in both with the same code. (If you can find a solution that also works in IE 6 or 7 then that will be bonus points but I couldn't find a reliable solution to this.)

To recap just place an image 50px from the right side of the container (p tag) using css only and no change to the image or html is allowed.

Here is a screenshot of what I want:

And here is the same page resized smaller to show that the image is still in place.

And here is the image to use:

This is the html you must use along with the minimum css to create the container.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
* {margin:0;padding:0}
p {
    margin:50px auto;
    width:50%;
    height:200px;
    border:1px solid red;
}

</style>
</head>
<body>
<p></p>
</body>
</html>
You can add as much css as you like but you must keep the container a percentage width block level element. The html cannot be changed or added to at all and all your changes must occur in the css (within the style tags) and be valid css2.1

General Rules:
No frames or iframes
No javascript or scripting of any kind
No image alteration
No expression,conditional comments, behaviours etc.
Use Valid CSS 2.1
Use Valid xhtml
Must work in Firefox and Opera
No hacks
No finding loopholes - I'm sure you all know what I mean lol

As usual there are no prizes other than the self-satisfaction of completing this. If you have a the answer then post a message here but PM me the solution so that other people can still have a go. I will post the winners and their solutions later.

As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time.

Have fun .

Paul

PS. : In case you missed the other tests you can find them here:
test 1:
test 2:
test 3:
test 4:
test 5:
test 6: