CODEWITHSUNDEEP
htmlcss
TrippedStackers
TrippedStackers

Reputation: 423

How can I move the text up next to the image?

Got a small problem, I tried line-height but it didn't work. Maybe I'm overthinking something?

.blog-container ul{ 
    list-style: none;
    margin: 0;
    padding: 0;
}

.blog-container .entry {
    display: inline-block;
    width: 170px;

    padding: 0 0 0 0;

}

.posts li {
        margin: 0;
        padding: 0;
        margin-bottom: 6px;
        padding-bottom: 8px;
        border-bottom: 2px solid rgba(0,0,0,0);
        -webkit-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        -moz-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        -o-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
        display:block;
        line-height: 1.2em;     
}

.blog-container img {
    display: inline-block;
    width: 40px;
    height: 40px
}

.blog-container .entry .date {
    display: block;
    line-height: 0.7em;
}

HTML: 

<ul class="posts">
    <li>                                     
    <img src="https://cdn2.iconfinder.com/data/icons/interface-part-3/32/square-stack-small-48.png" alt="">
    <div class="entry">
       <a href="blog_post.html">This is a fucking test</a>
       <span class="date">January 1st, 2013</span>
    </div>                                    
    </li>
    <li>
    <img src="https://cdn2.iconfinder.com/data/icons/interface-part-3/32/square-stack-small-48.png" alt="">
    <div class="entry">
       <a href="blog_post.html">This is a fucking test</a>
       <span class="date">January 1st, 2013</span>
    </div>                                       
    </li>                                                               
 </ul>

Image: enter image description here

and ideas guys? Thanks!

http://jsfiddle.net/3EKJR/ (it's not showing the problem in jsfiddle, but in the image above, that's what it's showing.

Upvotes: 0

Views: 138

Answers (1)

Lokesh Suthar
Lokesh Suthar

Reputation: 3202

Okay this seems to be working for me. I used float:left

FIDDLE

.blog-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.blog-container .entry {
    display: block;
    width: 170px;
    padding: 0 0 0 0;
    float:left;
}
.posts li {
    height:35px;
    margin: 0;
    padding: 0;
    margin-bottom: 6px;
    padding-bottom: 8px;
    border-bottom: 2px solid rgba(0, 0, 0, 0);
    -webkit-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    -moz-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    -o-border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    border-image: url(http://uploadir.com/u/iee20dkw) 0 0 2 repeat;
    display:block;
    line-height: 1.2em;
    clear:both;
}
.blog-container img {
    display: block;
    float:left;
    width: 40px;
    height: 40px;
    margin-right:10px;
}
.blog-container .entry .date {
    display: block;
    line-height: 0.7em;
}

Upvotes: 1

Related Questions