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 {
float:left;
margin-left:-100px;
display:block;
}[/sourcecode]

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.

Comments are closed