Question

I’m styling a list of recent posts and images from a plugin from wordpress. I know there is a wordpress section but my question is to just get some advice as how to style this list.

The website is here

This is what it looks like now.

This is my CSS

.advanced-recent-posts { 
        list-style-type: none; 
    }

    .advanced-recent-posts li { 
        font-size: .7em; 
        font-weight: bold; 
        line-height: 20px; 
        color: #761616; 
        margin-bottom: 10px;
        text-transform: uppercase; 
        width: 250px; 
        position: relative; 
        top: -35px; 
        border: 1px solid #000;
    }

    .advanced-recent-posts li a {
        margin-left: 10px;
    }

    .advanced-recent-posts li img {
        position: relative; 
        top: 0px; 
        left: -10px; 
        padding: 5px; 
        border: 1px solid #999;
    }

and so far so good. But because both the image and the title & date are in the some

They move together which is not what I want, but because it is a plugin I dont know how to change that. So I was hoping with the provided website and CSS that someone could help me just make that second line of each recent post follow directly under the first. Like in my design here.

@Bonjour: This is what I got doing the

.advanced-recent-posts li { display:table-row; vertical-align:top;}

(and of course with all the other styling I had on it)

The post titles are at least flowing right.

Answer 1

Some weird positioning going on there. Anyway, there are two ways to make this happen:

1. Float the image left, add a bit of right/bottom padding. This way text naturally flows under the image
2. Take advantage of the relative positioning on the li and set position:absolute on the image, while giving the li enough padding to move the text from under it. This way text will never flow under the image

Examples: http://jsfiddle.net/Ucrsk/