CODEWITHSUNDEEP
htmlcss
125369
125369

Reputation: 3657

Icon on left and Text on right HTML/CSS

I think this may sound pretty simple, but still I can not get it to work.

My design has different icons of same size and height and I need to display them one below another and at the same time I need to give a small description about the icon on the right side for every icon.

The text for every icon on the right side consists of two lines, the first line in bold(header) and the second line normal(description). The padding and margin is my call. But I need to display them in that way in my content.

Upvotes: 3

Views: 15793

Answers (3)

epoch
epoch

Reputation: 16615

Check out this fiddle

Basically there is a container div with an unordered list inside it, each list item has a background image to the left and text to the right, no floats are used.

Upvotes: 0

字姓名
字姓名

Reputation: 436

you can simply left align your image and then devide 2 lines of your text with line break

<img src="image.jpg" style="float:left;" />
<strong>Header</strong><br />
<span>description</span>

Upvotes: 4

Alex
Alex

Reputation: 9041

this fiddle should set you in the right direction.

It basically floats both the <img> and <p>

Its not a finished artical, but it should point you in the right direction.

Upvotes: 1

Related Questions