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.)
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.
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.1Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
border:1px solid red;
No frames or iframes
No image alteration
No expression,conditional comments, behaviours etc.
Use Valid CSS 2.1
Use Valid xhtml
Must work in Firefox and Opera
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 .
PS. : In case you missed the other tests you can find them here: