Add some pop!

By John Leschinski | CSS

May 10

If your designing a theme with a dedicated column to the date stamp, you can take back some of that space under it and add a unique pop to your design.

In the image to the right the date column is a span and the content of the article is in a div to the right of it. Because of the way it is layed out, using a span and then floating the content next to it, you have the ability to float things outside of the content and under the date stamp as that column doesn’t extend the full length of the post. You can see it in action here.
It add’s a bit of visual intrest and gives you an extra bit of space for larger images you might have.

To make the images pop out of the grid I applied this class to a div wraped around the images.

[sourcecode language=’css’].picleft {

It’s as easy as that.

About the Author

John Leschinski is the creative director and founder of Leschinski Design. John's skill and talent is sought after by large and small companies and organizations, both local to the Rainy River district, London Ontario, and globaly. His experience and knowledge are also used in classrooms to groom the next generation of web developers and business seminars discussing e-commerce and the value of good design.

Kevin May 10, 2008

That's a neat little feature. I like how the images extend beyond the content area to the left hand side. Very few blogs use this kind of thing 🙂

James Mann May 11, 2008

Now that's not only easy and straight forward, it's also a pretty cool looking effect.

I checked the page you gave as an example. The first image looks pretty good but the one's below that look like they are mistakes.

I think this option would look great with bullet points that are graphics.

David Peralty May 11, 2008

I love that effect. Images can make great content, and having the space to put even larger images in is always nice. +1 here, great tutorial.

Comments are closed