CODEWITHSUNDEEP
htmlcssalignment
Rodrigo Sasaki
Rodrigo Sasaki

Reputation: 7226

How do I align this text next to the image?

I have seen many topics on this around Stackoverflow, but I still could not find out how to do this on this particular case.

I am trying to display a list in a card fashion, I have a template I developed. It looks like this:

Prototype

Here I have 3 cards, and in the first one, I displayed where I think divs should be created

I cannot align the text the way I want. I want the Title on top of the Description and both aligned right of the first image. But so far I have gotten nowhere. I have a JSFiddle of what I have so far right here: http://jsfiddle.net/MEaze/

Sorry about the ugly colors, I just needed to "see" the divs.

Upvotes: 0

Views: 82

Answers (4)

user753676
user753676

Reputation:

You have to use float:left

http://jsfiddle.net/cAT2B/
http://jsfiddle.net/y7GJa/
I have also added a second image

You should also use DIV

.trophy-image {
    background-color: #FF0000;
    margin: 8px;
    height: 56px;
    float:left;
}

.trophy-info {
    background-color: #00FF00;
    float:left;
}

Upvotes: 1

nkmol
nkmol

Reputation: 8091

You only have to float the image to left. This div will automatically become a inline-block:

.trophy-image {
    background-color: #FF0000;
    margin: 8px;
    height: 56px;
    float: left;
}

To set the description to the middle of the image you can use line-height:

.trophy-info {
    //background-color: #00FF00;
    line-height: 90%;
}

Here an example.

Upvotes: 1

Snowburnt
Snowburnt

Reputation: 6922

You have to make the image float left.

I added: 

float:left;

to the image div's css. Is that what you were looking for?

http://jsfiddle.net/2jfSK/

Upvotes: 1

Banana-In-Black
Banana-In-Black

Reputation: 2557

Make them float, and use div instead p.

.trophy-image {
    float: left;
    background-color: #FF0000;
    margin: 8px;
    height: 56px;
}

.trophy-info {
    float: left;
    background-color: #00FF00;
    margin: 8px;
    line-height: 28px;
}

updated jsFiddle

Upvotes: 2

Related Questions