CODEWITHSUNDEEP
css
user1736049
user1736049

Reputation: 366

Text and image in div - How to align correctly?

I have text and image inside a div and I want the text to be aligned at the top of the image, not the middle.

Here's how it looks: http://bitly.com/VSSoul

CSS: 

.book1 {
    width: 100%;
    overflow: auto;
}

.book2 {
    width: 100%;
    overflow: auto;
}

.book1 img {
    float: right;
    width: 150px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

How do I make the text go to the top of the div, and not center relative of image?

Upvotes: 0

Views: 53

Answers (3)

fanfavorite
fanfavorite

Reputation: 5199

It actually is aligned to the top. The h4 tag has default margins, so setting:

h4 {
  margin-top: 0;
}

would do the trick.

Upvotes: 2

samuel.molinski
samuel.molinski

Reputation: 1129

hear you go. add

h4 { margin-top: 0; }
.book1 {margin-bottom: 1.5em;}

the extra margin on .book1 helps with spacing the individual books apart

Upvotes: 0

micadelli
micadelli

Reputation: 2482

.book img {
    float: right;
    width: 150px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.book {
    margin-bottom: 2em;
    overflow: auto;
}

Demo JSFiddle:
http://jsfiddle.net/e636q/

Upvotes: 0

Related Questions