Example 0:

Ad followed by P's with no IMG

ad

The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div, inside of which we need two 300-pixel columns for images and ads that can float left and right, with a 20-pixel gutter between them. The problem is this:

When the 20px gutter is there, the image won't float next to the ad, so if an image appears in the flow next to the advertisement, it's pushed down below the ad. The designers at Gawker who are working on this are stumped. The only partial solution they've found involves creating shims using empty divs, but it's not a solution we're happy with. So!

The first CSS wizard who can solve this problem for us, if possible, takes home a $2,000 prize. The solution shouldn't involve any JavaScript or shims, it should be pure CSS, and it should incorporate the 20-pixel gutter without messing up the flow of images. If you think you've got a fix that meets our needs and criteria, submit it in the comments below. The first person to comment with a solution that does gets the $2,000 bounty.

Example 1:

Ad followed by IMG followed by P

ad
img

The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div, inside of which we need two 300-pixel columns for images and ads that can float left and right, with a 20-pixel gutter between them. The problem is this:

When the 20px gutter is there, the image won't float next to the ad, so if an image appears in the flow next to the advertisement, it's pushed down below the ad. The designers at Gawker who are working on this are stumped. The only partial solution they've found involves creating shims using empty divs, but it's not a solution we're happy with. So!

The first CSS wizard who can solve this problem for us, if possible, takes home a $2,000 prize. The solution shouldn't involve any JavaScript or shims, it should be pure CSS, and it should incorporate the 20-pixel gutter without messing up the flow of images. If you think you've got a fix that meets our needs and criteria, submit it in the comments below. The first person to comment with a solution that does gets the $2,000 bounty.

Example 2:

Ad followed by P followed by IMG

ad

Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div.

img

The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div, inside of which we need two 300-pixel columns for images and ads that can float left and right, with a 20-pixel gutter between them. The problem is this:

When the 20px gutter is there, the image won't float next to the ad, so if an image appears in the flow next to the advertisement, it's pushed down below the ad. The designers at Gawker who are working on this are stumped. The only partial solution they've found involves creating shims using empty divs, but it's not a solution we're happy with. So!

The first CSS wizard who can solve this problem for us, if possible, takes home a $2,000 prize. The solution shouldn't involve any JavaScript or shims, it should be pure CSS, and it should incorporate the 20-pixel gutter without messing up the flow of images. If you think you've got a fix that meets our needs and criteria, submit it in the comments below. The first person to comment with a solution that does gets the $2,000 bounty.

Example 3:

Ad followed by Two P's followed by IMG

ad

Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div.

Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline.

img

The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div, inside of which we need two 300-pixel columns for images and ads that can float left and right, with a 20-pixel gutter between them. The problem is this:

When the 20px gutter is there, the image won't float next to the ad, so if an image appears in the flow next to the advertisement, it's pushed down below the ad. The designers at Gawker who are working on this are stumped. The only partial solution they've found involves creating shims using empty divs, but it's not a solution we're happy with. So!

The first CSS wizard who can solve this problem for us, if possible, takes home a $2,000 prize. The solution shouldn't involve any JavaScript or shims, it should be pure CSS, and it should incorporate the 20-pixel gutter without messing up the flow of images. If you think you've got a fix that meets our needs and criteria, submit it in the comments below. The first person to comment with a solution that does gets the $2,000 bounty.

Example 4:

Ad followed by Four P's, longer than the ad, followed by IMG

ad

Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div.

Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div.

Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div.

img

The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div, inside of which we need two 300-pixel columns for images and ads that can float left and right, with a 20-pixel gutter between them. The problem is this:

When the 20px gutter is there, the image won't float next to the ad, so if an image appears in the flow next to the advertisement, it's pushed down below the ad. The designers at Gawker who are working on this are stumped. The only partial solution they've found involves creating shims using empty divs, but it's not a solution we're happy with. So!

The first CSS wizard who can solve this problem for us, if possible, takes home a $2,000 prize. The solution shouldn't involve any JavaScript or shims, it should be pure CSS, and it should incorporate the 20-pixel gutter without messing up the flow of images. If you think you've got a fix that meets our needs and criteria, submit it in the comments below. The first person to comment with a solution that does gets the $2,000 bounty.

Example 5:

Ad followed by One long P, longer than the ad, followed by IMGs

ad

Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div. Foobar! The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div.

Note: This header is necessary to pad the IMG below

img

The problem, as illustrated in the image above, involves our images and the 300-pixel ads that appear inline. The problem boils down to this: Our layout consists of a 620-pixel content div, inside of which we need two 300-pixel columns for images and ads that can float left and right, with a 20-pixel gutter between them. The problem is this:

When the 20px gutter is there, the image won't float next to the ad, so if an image appears in the flow next to the advertisement, it's pushed down below the ad. The designers at Gawker who are working on this are stumped. The only partial solution they've found involves creating shims using empty divs, but it's not a solution we're happy with. So!

img

The first CSS wizard who can solve this problem for us, if possible, takes home a $2,000 prize. The solution shouldn't involve any JavaScript or shims, it should be pure CSS, and it should incorporate the 20-pixel gutter without messing up the flow of images. If you think you've got a fix that meets our needs and criteria, submit it in the comments below. The first person to comment with a solution that does gets the $2,000 bounty.