CSS - Test Your CSS Skills Number 42 - Float center revisited: Quiz now ended see solution in #post 36Important:Don't post your answers in this thread but PM with the details instead so that all can have a go.

Time for another quiz and we are revisiting a quiz we did a while ago but with some differences. The task is pretty straight forward and should be something that you can complete in your coffee break once you realise how to do it.:)

The task is this:

Using only CSS (no scripting or expressions) the task is to float a fixed height and width image so that it spans two separate columns and the text is displaced accordingly in each column. The columns may be a fixed width or a fluid width but the technique should work for either.

First take a look at the attachment which shows exactly how the elements must look and perform.

CSS3 has positioned floats which can accomplish this sort of thing but we are trying to accomplish this so that it works in IE8 and above.

I'm pretty lax on rules as I like to see people thinking out of the box and I will award the winner based on either the best solution or the most innovative or indeed the one that matches the requirements exactly.

I will allow changes to the html if they improve the result and still maintain clean code. However for extra points I would prefer that you also solve the quiz in the current state because there are easier ways to do this when adding more html.

Remember this is just for funand there are no prizes. Your reward will be knowing how smart you are. If you need any clarification then just shout but this should be straight forward.

Don't post your answers in this thread but PM with the details instead so that all can have a go.

As pointed out to me quite rightly by PM the columns in my demo are not really centred and the image isn't perfectly centred either so feel free to improve on this. I'm not worried by a few pixels in a fluid layout and of course you are free to change or abandon the css I gave you. Just make sure the html remains untouched unless you have a very clever idea that needs to adjust the html slightly and then of course we'd be delighted to see it.:)

YuriKolovsky
—
2012-07-18T16:30:06Z —
#8

Oh were tackling float center again (somewhat), lets see if Eric J joins us again.

PaulOB
—
2012-07-18T19:24:25Z —
#9

YuriKolovsky said:

Oh were tackling float center again (somewhat), lets see if Eric J joins us again.

Erik J seems to have disappeared off the face of the earth. I have tried to contact him many times but get no reply. I hope that he is ok. He was a genius with CSS trickery.

YuriKolovsky
—
2012-07-18T20:22:27Z —
#10

Paul_O_B said:

Erik J seems to have disappeared off the face of the earth. I have tried to contact him many times but get no reply. I hope that he is ok. He was a genius with CSS trickery.

That is worrying, although common on the Internet, hope he is ok.

re:quizWhy are all your coffee break quizzes so hard for me to figure out? Is it because I don't drink coffee?

PaulOB
—
2012-07-18T20:50:49Z —
#11

YuriKolovsky said:

re:quizWhy are all your coffee break quizzes so hard for me to figure out? Is it because I don't drink coffee?

I'll have to get on my laptop later to test IE9, coffee break ended already.

PaulOB
—
2012-07-19T07:44:10Z —
#13

Hi Ray, nice to see you around again

Well done, you have done exactly as I wanted and the layout is working fine in IE8+. You correctly spotted the set of techniques needed to accomplish this.

I also have an entry form Markbrown4 which is pretty close but just needs one final push to get it all working (and that's a clue).

PaulOB
—
2012-07-19T12:45:08Z —
#14

I now have a correct solution form Markbrown4 that fulfils all the criteria. Well done Mark.

Any more takers? It's not that hard - really

Nikhil
—
2012-07-20T10:48:05Z —
#15

not hard !! really ? I've now spent half a day on it, pulled out my css book but still can't get the left column text to wrap around the image. Any hints ?

guido2004
—
2012-07-20T11:39:56Z —
#16

I got it for a part, I just can't get the text above the image to reach the end/beginning of the columns, it folds at the borders of the image. Ah well, I don't have more time to spend on it right now.

PaulOB
—
2012-07-20T13:35:44Z —
#17

OK time for a hint :).It's before or after that the sandbag becomes useful and not only for the first child to play with.

ralphm
—
2012-07-20T14:17:57Z —
#18

Attempt submitted.

Didn't think I had a hope at this, but surprised myself ... even if it's not the best way.

PaulOB
—
2012-07-20T14:42:11Z —
#19

Well done Ralph, that will do nicely

Any other takers?

I will let the quiz run for the weekend to give others more time.

Markdidj
—
2012-07-20T23:49:43Z —
#20

Nikhil said:

not hard !! really ? I've now spent half a day on it, pulled out my css book but still can't get the left column text to wrap around the image. Any hints ?

That's the problem with me and this site! I get too addicted to helping others and learning at the same time, too much time talking and not enough doing. But then I joined a dating site, but the only thing I learnt there was how to deal with rejection. Back here to pick up a few more tips and help out a few folks. At least I get replies here, even if they are only of a geeky nature......lol