How to put a text beside the image?

U23r picture U23r · Oct 10, 2013 · Viewed 234.9k times · Source

I'm making a website on Google Sites. I choose the 3 column layout and put the images one by one. I want to put the text beside the image, but it only works with the first line, and even that is in "the end" of the image. The screenshot below illustrates what I'm saying.

screenshot

The html code:

<div style="display:block;text-align:left">
<h2><span style="color:rgb(7,55,99)">Students</span></h2>
<hr>
<br>
<div style="display:block;text-align:left"><a href="https://some.addres" imageanchor="1"><img align="left" src="https://some.addres/blue-user-icon.png" border="0"></a>- Name<br>
- Major<br>
- Email<br>
- Lattest</div>
</div>
<br>
<br>

What can I do to put all the text line beside the image? Like, at the same height of the image, or something like that.

Answer

Dhaval Marthak picture Dhaval Marthak · Oct 10, 2013

You need to go throgh these scenario:

How about using display:inline-block?

1) Take one <div/> give it style=display:inline-block make it vertical-align:top and put image inside that div.

2) Take another div and give it also the same style display:inline-block; and put all the labels/divs inside this div.

Here is the prototype of your requirement

JS Fiddle Demo