Intersmash Design Challenge

Album Cover: Into the Wild

"I knew all the rules, but the rules did not know me...guaranteed."
Eddie Vedder / Guaranteed

Posted on September 01, 2003 12:57 AM in Web Design
Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

While reading today I noticed a link to the Intersmash Design Challenge. It looked interesting, so I decided to give it a shot. I think I was in it more for the challenge (and the knowledge) than I was the $15 gift certificate to, but that doesn't hurt either.

After a few dead-end attempts at achieving the dual-column nested image effect, I stumbled upon an idea that seemed to make sense, even if it involved a constrained environment. What I did was create the dual-column layout (the really easy part), and then create two spans using CSS that hug the middle margin of their respective columns. The spans were set to a width and height that would allow enough nested space for the image later on (which bizarrely enough was a pre-supplied picture of David Hasselhoff).

Once these spans were setup correctly, I could insert them in roughly the same position in both columns to create the nested space. They didn't need to be exact because the outer margins that pushed the text aside would allow a little breathing room. Once the spans were in place, all I needed to do was insert the absolutely-positioned image of Hasselhoff inside the nested space, thus making it appear that the image itself was pushing the outer text aside. You can see the finished result or take a peek at the trickery involved if you so desire.

It's a rather simple approach to a somewhat complex problem, but the actual implementation involves some complexities that make me think I might not win the competition. For instance, any changes in the content will require that the spans be repositioned, and changing the dimensions of the columns themselves might create further problems as well. However, I made the assumption, since the rules of the contest were rather open-ended, that anyone who implemented the technique would do so after the content had been placed and finalized. If so, throwing in the spans and dropping in the image with some absolute positioning becomes an easy way to achieve the dual-column nested image effect so often seen in print media.


No one has added any comments.

Post Comments

If you feel like commenting on the above item, use the form below. Your email address will be used for personal contact reasons only, and will not be shown on this website.


Email Address:



Check this box if you hate spam.