How to put a text beside the image?

Question

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.

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.

Chancechancel

Use floats w3schools.com/css/css_float.asp – Kumquat

Don't put screen shots put live example, because image is hardly visible – Fiddlefaddle

Your code screenshot practically not readable. You can read about formatting code blocks here. – Hereon

Like I said, I put the code here but it only shows what the code prints on the screen, the result, not the code. Again, sorry about that. I'll read more about this. – Chancechancel

Answer 1

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

Fiddlefaddle

Answer 2

Use floats to float the image, the text should wrap beside

http://www.w3schools.com/css/css_float.asp

Kumquat

Answer 3

make the image float: left; and the text float: right;

Take a look at this fiddle I used a picture online but you can just swap it out for your picture.

Lamartine

Where I put each one? <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="sites.google.com/site/hpcmobilerobotics/team/…" imageanchor="1"><img src="sites.google.com/site/hpcmobilerobotics/team/blue-user-icon.png" border="0"></a> - Name<br> - Major<br> - Email<br> - Lattes</div> <br> <br> – Chancechancel

<div style="display:inline;text-align:left;"> <h2><span style="color:rgb(7,55,99)">Students</span></h2> <hr> <br> <div style="display:inline;text-align:left; float: left;"><a href="sites.google.com/site/hpcmobilerobotics/team/…" imageanchor="1"><img src="school.discoveryeducation.com/clipart/images/student2.gif" width="100" height="150" border="0"></a> <div style="float: right; display: inline-block;"><ul style="list-style-type:square"><li>Name<li> Major<li>Email<li>Lattes</div></div><br> <br> – Lamartine

Answer 4

If you or some other fox who need to have link with Icon Image and text as link text beside the image see bellow code:

CSS

.linkWithImageIcon{

    Display:inline-block;
}
.MyLink{
  Background:#FF3300;
  width:200px;
  height:70px;
  vertical-align:top;
  display:inline-block; font-weight:bold;
} 

.MyLinkText{
  /*---The margin depends on how the image size is ---*/
  display:inline-block; margin-top:5px;
}

HTML

<a href="#" class="MyLink"><img src="./yourImageIcon.png" /><span class="MyLinkText">SIGN IN</span></a>

if you see the image the white portion is image icon and other is style this way you can create different buttons with any type of Icons you want to design

Screwdriver

Answer 5

I had a similar issue, where I had one div holding the image, and one div holding the text. The reason mine wasn't working, was that the div holding the image had display: inline-block while the div holding the text had display: inline.

I changed it to both be display: inline and it worked.

Here's a solution for a basic header section with a logo, title and tagline:

HTML

<div class="site-branding">
  <div class="site-branding-logo">
    <img src="add/Your/URI/Here" alt="what Is The Image About?" />
  </div>
</div>
<div class="site-branding-text">
  <h1 id="site-title">Site Title</h1>
  <h2 id="site-tagline">Site Tagline</h2>
</div>

CSS

div.site-branding { /* Position Logo and Text  */
  display: inline-block;
  vertical-align: middle;
}

div.site-branding-logo { /* Position logo within site-branding */
  display: inline;
  vertical-align: middle;
}

div.site-branding-text { /* Position text within site-branding */
    display: inline;
    width: 350px;
    margin: auto 0;
    vertical-align: middle;
}

div.site-branding-title { /* Position title within text */
    display: inline;
}

div.site-branding-tagline { /* Position tagline within text */
    display: block;
}

Peso