The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

edit:
only now do i test it in other browsers, and yes i see the "eyes only move after face hover" bug in safari, chrome
the corners are completely square in opera, and IE (all versions), and it completely breaks in IE versions below 8

ryan you said you had round corners in ie7, and opera?

RyanReese
Mine only fails in IE6 and that is because of the selectors-I could have gotten away with not using it

or did you only mean that they are not complete total ultra messed up in IE7, IE8?

is there even a reasonable way to get round-border's in opera? (i can't believe it's not working, in opera!!)

Stu nichols rounded corners are very unreasonable. He has about...100 elements just for the roundedcorners. I'm currently on a task to develop rounded corners without images, and without a crappp load of images.

Thanks to all for taking part again especially Yurikolovsky, Erik J and Ryan for their continued support. Thanks to RoObear for supplying quiz A also.

I'm surprised that we didn't get more interest as these were 2 great quizzes with some great answers.

The winner of Quiz A must go to Erik J for an entry that is bordering on genius and makes my original answer look embarrassing.

The winner of Quiz B is Yurikolovsky as his example is very funny.

Quiz A (create float:center)

Here is my original paltry solution.
(Firefox only)

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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
p {
margin:1em 0;
}
.box {
width:50%;
background:red;
border:10px solid red;
position:relative;
text-align:justify;
}
.box span, .box span.image {
width:200px;
height:200px;
background:red;
float:left;
}
.box p.image {
background:yellow;
width:190px;
height:190px;
position:absolute;
left:50%;
top:0;
margin-left:-100px;
line-height:200px;
text-align:center;
background:yellow;
border:5px solid red;
}
.overlay {
left:0;
top:0;
position:absolute;
width:50%;
left:0%;
overflow:hidden;
}
.box .overlay span {
float:right;
background:transparent
}
.overlay p {
width:200%;
margin-right:-100%;
background:red
}
</style>
</head>
<body>
<div class="box">
<p><span></span>This is some text that will flow around both sides of the image. The text can still be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p>
<div class="overlay">
<p><span></span>This is some text that will flow around both sides of the image. The text can still be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!</p>
</div>
<p class="image">Image</p>
</div>
</body>
</html>

<!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>float:center; - YuriKolovsky</title>
<style type="text/css">
p {
margin:1em 0;
}
.box {
width:50%;
background:red;
/*max-width:610px; why the limit?*/
position:relative;
padding:10px;
overflow:hidden;
}
.img {
top:25px;
position:relative;
margin:0 auto;
z-index:3;
width:150px;
border:solid red 5px;
}
.img img {
width:150px;
height:150px;
line-height:150px;
text-align:center;
display:block;
background-color:yellow;
}
.p1, .p2 {
padding-bottom:1em;
position:relative;
margin-top:-150px;
}
.p2 span {
width:160px; /*img width + right padding*/
height:150px;
display:block;
float:right;
}
.p1 p {
padding-left:90px; /*half img width + right padding*/
padding-right:90px; /*half img width + right padding*/
margin-left:-100%;
}
.p1 {
position:absolute;
right:10px; /*right padding*/
width:50%;
height:160px; /*img width + img margin*/
margin-right:-90px; /*half img width + right padding*/
z-index:2;
overflow:hidden;
background-color:red;
}
</style>
</head>
<body>
<div class="box">
<div class="img"><img scr="supercoolmissingimg.gif" alt="Image" /></div>
<div class="p1"><p>This is some text that will flow around both sides of the image. The text can stil be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!
</p></div>
<div class="p2"><p><span></span>This is some text that will flow around both sides of the image. The text can stil be read from left to right across the whole of the container and still make sense apart from the odd letter that gets split on either side of the image. This would be a useful effect if perhaps we invented a new "float:center" property that allows the text to flow around both sides of the image but would of course look much neater if there was some margin around the image. See if you can come up with something better than this that still makes sense as the window is resized bigger or smaller within a reasonable range. The css is relatively simple but of course not very semantic due to the way that it is constructed. However it makes for a useful and interesting effect but I'm sure someone can come up with something much better!
</p></div>
</div>
</body>
</html>

can someone give me a english language explanation on how erik.j's solution to quiz A works??

I'll get Erik to go into full details but the idea is that you start with a box already in the middle of the page and then you drag the text outside this box with negative margins.

Then alternate left and right floats are added so that the text moves one side and then the other. This would result in uneven rows so the line height is adjusted to make the text stay on one line and then by clever manipulation of negative margins, line-height and padding you can align the text into neat rows.

If you remove some settings you can start to see how this effect builds up.