Blogging Tips

Add some pop!

Written by John Leschinski from Leschinski Design

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.

.picleft {
  float:left;
  margin-left:-100px;
  display:block;
}

It’s as easy as that.

Written by John Leschinski from Leschinski Design
Posted on May 10th, 2008 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

3 Responses to “Add some pop!”

Author comments are in a darker gray color for you to easily identify the posts author in the comments

Kevin says:

May 10, 2008 at 4:43 pm

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 says:

May 11, 2008 at 5:16 am

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 says:

May 11, 2008 at 5:20 pm

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.