I having another go at it, the technique I tried at first did not change, except that now I knew it was not a dead-end like I thought at first, I just hope it’s easier than finding the answer to Life, the universe, and everything
I have a correct solution from Yurikolovsky -so well done Timo 
Anyone else struggling? I’ll drop a few more clues if anyone else wants to try otherwise we’ll wrap this up in a few day.
Thanks to all those that took part so far.
Took a couple of goes at it but haven’t quite figured out the vertical bit 
I’m sure you’ll get it soon Chris
I submitted something, something…
Thanks Maleika that’s working as well well done.
We have some clever people here
Any more takers?
I’ll probably wind this up tomorrow or Thursday so shout if you still want to try.
Sent mine also.
Though I have to admit to a little cheat. Me and the wife were gone on a car trip past week, celebrating our 10 years together, and, lucky me, we just happen to bump into a live float: center.
… speaking of which, use the picture here and the second code I PMed you, Paul, to see how I used this quiz to make something interesting.
Thank you Paul, for these great ideas!
Thanks for your entry itmitică it’s perfect. Well done and thanks for taking part.
Also congratulations to you and your wife for your recent celebration.
Loved the picture.
Thank you! You’re very kind. I was just following your breadcrumbs. 
I hear congratulations are in order (soon) for you too, so all the best wishes to you (and to your wife)!
Great picture itmitică, looks as good as the professional stock photos… and congratulations!
Mitica, I don’t know what you are celebrating, but whatever it is, congratulations!
He mentioned “celebrating our 10 years together”.
@YuriKolovsky
Thank you!
And the photo seem so right, in more than one way, for this quiz.
@kohoutek
Ralph is right, me and my wife were celebrating our 10th anniversary. Thank you for your good wishes.
But you should prepare yourself, Paul has “bigger” things to celebrate, next month and next year.
I have another late entry from Candygirl which works in all but Safari so well done. The safari problem (bug) is also evident in Maleika’s entry and is strange because Chrome is fine. The rest of the entries don’t suffer from this bug as they use a slightly different technique.
I’ll be awarding the Gold, Silver and Bronze medals tomorrow to end this Olympic quiz
O no, I came in here hoping for a break from the Olympics. 
Solution Time
Thanks to all that took part and now its time to announce the solution and the winners.
Solution:
I gave out a few clues already but in plain English the way to solve this quiz was to create floated elements on the right of the first column and the left of the second column which were at least half the image’s width. This ensured that the text avoided the area where the image was going to sit. Using any spare html elements or either of the pseudo classes :before or :after (or both) you could float little sandbags of generated content to hold the space open for the image. The image could then be placed into that space with a float and negative margins or more precisely with absolute positioning and thus avoiding any pixel imperfection due to the percentage gap between columns.
Some of you struggled with how to push the image down into the text and once again this is done with generated content and sandbag floats. You just create a 1px wide float with generated content and float it to the side of the column and this will push the floated image down further while the text wraps all around.
Some of you used a negative top margin technique to get the image into position but this failed in Safari as the text above did not wrap around the image and spoiled the effect.
Here is the full solution to play with:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
position:relative;
}
.col1, .col2 {
width:48%;
float:left;
margin:1%;
background:#eee;
text-align:justify;
}
.col2 { float:right }
p {
padding:5px;
margin:0 0 1em;
}
.col1:before, .col2:before {
float:right;
width:1px;
height:100px;
content:" ";
}
.col2:before { float:left }
.col1 div {
float:right;
clear:right;
height:154px;
width:95px;
}
.col2 p:first-child:before {
float:left;
clear:left;
height:154px;
width:90px;
content:" ";
}
.col1 div img {
width:165px;
position:absolute;
border:10px solid #fff;
left:50%;
margin:0 0 0 -93px;
top:115px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col1">
<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
As you can see the html is very clean and the effect very usable. The only drawback is that you have to know the image dimensions beforehand.
The Winners
It was hard to pick a winner because the techniques were all very similar but I have decided to award the gold medal to markbrown4 because he was the first to spot that the absolute image would be perfectly centred rather than the negative margin that some others used.
The silver medal goes to itmitică because he also spotted this technique but also because he also supplied an interesting application of the technique in a second entry which was worthy of mention.
The bronze medal goes to Ralph as he was the first to spot that text-align:justify produced a nicer effect.
Ray was by far the quickest so also worth a mention. Well done to all the above and indeed all that took part and hope you enjoyed the quiz and perhaps learned something that you could apply in your own designs.
Here are the Solutions.
markbrown4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>paul <3 css</title>
<style>
body { background: #ccc }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
}
.col1, .col2 {
width:48%;
float:left;
margin:1%;
background:#eee;
}
p {
padding:5px;
margin:0 0 1em;
}
img {
position: absolute;
top: 240px;
left: 50%;
margin-left: -82px;
}
.col1:before, .col2:before {
content: '';
float: right;
height: 200px;
width: 1px;
}
.col1 div, .col2 p:first-child:before {
clear: both;
content: '';
float: right;
height: 154px;
width: 100px;
}
.col2:before, .col2 p:first-child:before { float: left; }
</style>
</head>
<body>
<div class="wrap">
<div class="col1">
<div><img src="https://www.google.com.au/images/srpr/logo3w.png" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
itmitică
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
background:#ccc;
}
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
}
.col1, .col2 {
width:48%;
margin:1%;
background:#eee;
}
.col1:before,
.col2:before {
content: "";
width: 10px;
height: 100px;
background: blue;
}
.col2,
.col1:before,
.col1 div+p:before {
float: right;
}
.col1,
.col2:before,
.col2 p:first-child:before {
float: left;
}
.col1 div+p:before,
.col2 p:first-child:before {
content: "";
width: 83px;
height: 124px;
background: red;
clear: both;
}
.col1 div {
position: absolute;
left: 50%;
margin-left: -83px;
top: 130px;
}
p {
padding:5px;
margin:0 0 1em;
}
</style>
</head><body>
<div class="wrap">
<div class="col1">
<div>
<img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body></html>
itmitică
Intersting application of the technique
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
background:#ccc;
}
.wrap {
width:800px;
height: 600px;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:transparent url(http://i1054.photobucket.com/albums/s490/itmitica/itmitica-float-center.jpg) no-repeat center center;
text-shadow: 1px 0 1px white;
}
.col1,
.col2 {
width:48%;
background:transparent;
}
.col1:before,
.col2:before {
content: "";
height: 200px;
}
.col2,
.col1:before,
.col1 div+p:before {
float: right;
}
.col1,
.col2:before,
.col2 p:first-child:before {
float: left;
}
.col1 div+p:before,
.col2 p:first-child:before {
content: "";
width: 150px;
height: 300px;
clear: both;
}
.col1 div {
position: absolute;
left: 50%;
margin-left: -150px;
top: 200px;
}
p {
padding:5px;
margin:0 0 1em;
}
.col1 p {
text-align: right;
}
</style>
</head><body>
<div class="wrap">
<div class="col1">
<div>
<img src="dummy.jpg" width="300" height="300" alt="">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
</div>
</div>
</body></html>
ralphm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
}
.col1, .col2 {
width:47%;
float:left;
margin:1%;
background:#eee;
}
p {
padding:5px;
margin:0 0 1em;
text-align: justify;
}
img {
vertical-align: bottom;
position: absolute;
left: 0;
top: 0;
border: 8px solid #fff;
}
.col1 > div {
float: right;
clear:right;
margin: 15px -85px 15px 20px;
position: relative;
width: 165px; height: 128px;
}
.col1:before {
content:" ";
width: 1px;
overflow:hidden;
height: 50px;
float: right;
border-right: 1px solid #eee;
}
.col2:before {content:" ";
width: 1px;
overflow:hidden;
height: 50px;
float: left;
clear: left;
border-left: 1px solid #eee;
}
.col2 > p:first-child:before {
content:" ";
width: 90px;
height: 144px;
overflow:hidden;
float: left;
clear: left;
margin: 20px 20px 0 -10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col1">
<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
[B]
Rayzur[/B]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Quiz 42 - Rayzur</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
padding:10px;
}
.col1, .col2 {
width:49%;
float:left;
background:#eee;
}
p {
padding:5px;
margin:0 0 1em;
}
/* CSS additions for quiz*/
.col2 { float:right; }
.col1:before, .col2:before {
content:"";
float:right;
height:120px;
}
.col2:before { float:left; }
.col2 p:first-child:before {
content:"";
clear:left;
float:left;
width:85px;
height:144px;
margin:10px 15px 10px -5px;/*background:lime;*/
}
.col1 div {
width:165px;
position:relative;
clear:right;
float:right;
margin:10px -98px 10px 10px;
left:1%;
border:10px solid #fff;
font-size:0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col1">
<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
Yurikolovsky
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS Quiz 42 - YuriKolovsky</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
}
.col1, .col2 {
width:47%;
float:left;
margin:1%;
background:#eee;
}
p {
padding:5px;
margin:0 0 1em;
}
/*these push*/
.col1:before,
.col2:before {
height:144px;
float:right;
content: " ";
}
.col2:before {
float:left;
}
/*these float*/
.col1 img {
float:right;
clear:right;
position:relative;
right:-4%;
margin:10px;
margin-right:-85px;
padding:10px;
background:#fff;
}
.col2 p:first-child:before {
width:65px;
height:124px;
float:left;
content:" ";
display:block;
clear:left;
margin:10px;
margin-left:-5px;
padding:10px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col1">
<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
Kohoutec (Not working in Safari)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Quiz 42 - Rayzur</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
}
.wrap:before {
content: "";
display: block;
margin-top: 200px;
}
.col1, .col2 {
width:48%;
float:left;
margin:1%;
}
p {
padding:5px;
margin:0 0 1em;
}
.col1 div { margin-top: -200px; }
.col1 div img {
float: right;
margin-right: -87px;
position: relative;
z-index: 1;
width: 165px;
padding: 15px;
}
.col2 > :first-child { margin-top: -200px; }
.col2:before, .col1:before {
display: block;
content: "";
width: 165px;
height: 124px;
float: left;
margin-left: -115px;
margin-right: 10px;
padding: 15px;
}
.col1:before {
float: right;
margin-right: -115px;
}
</style>
</head>
<!-- http://lab.rockatee.com/quiz.html -->
<body>
<div class="wrap">
<div class="col1">
<div><img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
Candygirl Not working in Safari
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:#ccc; }
.wrap {
width:70%;
margin:auto;
overflow:hidden;
border:5px solid #000;
background:#fff;
}
.col1, .col2 {
width:48%;
float:left;
margin:1%;
background:#eee;
padding-top:100px; /* to let room for the negativ margin */
}
.col1 img+p, .col2 p:first-child { margin-top:-100px; /* to make the text going up the image but this is not efficient on safari PC & maxhton -_- */ }
p {
padding:5px;
margin:0 0 1em;
}
img {
border:10px solid #FFF;
margin:5px;
float:right; /* float */
margin-right:-97px; /* half image width */
position:relative; /* to bring it in front of col2 */
}
.col2:before { /* to make room on the right column for the picture */
content:'';
width:98px; /* half image width */
height:154px;
float:left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="col1"> <img src="http://www.pmob.co.uk/SitePoint-quiz/tv-img2.jpg" width="165" height="124" alt="Sea">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ultrices felis et neque egestas suscipit. Donec tortor odio, pulvinar non tristique ac, imperdiet sed libero. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus. </p>
</div>
<div class="col2">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. Nulla facilisi. Integer nisi nulla, consectetur auctor laoreet sed, gravida non nulla. Cras volutpat aliquet volutpat. Sed ligula nibh, feugiat at sollicitudin sit amet, dignissim eget velit. Aenean consectetur aliquam urna, non mattis risus dictum ac. In hac habitasse platea dictumst. Sed ac magna metus</p>
<p>Pellentesque habitantxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus viverra erat quis massa hendrerit vestibulum. Donec laoreet convallis egestas. Pellentesque habitantxxx morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Praesent posuere scelerisque euismod. Etiam ante justo, euismod quis feugiat ut, ullamcorper sit amet ligula. Donec congue odio eget nunc tincidunt nec vehicula mauris tincidunt. Integer ac pellentesque arcu. Vivamus ipsum sapien, auctor eu ornare ac, feugiat lobortis lectus. </p>
</div>
</div>
</body>
</html>
If I’ve left anyone out please shout.
Feel free to improve on this solutions and come up with different uses. Even if you couldn’t solve it first time around you may see ways to improve or expand on the original ideas.
Thanks to all that took part and hope to see you in the next quiz in a few weeks time
Congrats, everyone! :tup:
Thanks for the quiz Paul,
It’s quite hard to think of the 1px sand bag float if you’ve never used them before.
Yeah, that’s what broke my neck. I definitely need to get back into CSS trickery more.
It was a fantastic quiz and I’ll definitely take part in the next one, whenever that is.
Thanks for all the hard work, Paul!
Yes, agreed, thank you Paul, and for another trick for me to always remember thanks to your dedication!
And congrats to all, awarded or not. Maleika has it right!