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  quot the end quot  of the image  The screenshot below illustrates what I m saying   The html code   lt div style  quot display block text-align left quot  gt   lt h2 gt  lt span style  quot color rgb 7 55 99  quot  gt Students lt  span gt  lt  h2 gt   lt hr gt   lt br gt   lt div style  quot display block text-align left quot  gt  lt a href  quot https   some addres quot  imageanchor  quot 1 quot  gt  lt img align  quot left quot  src  quot https   some addres blue-user-icon png quot  border  quot 0 quot  gt  lt  a gt - Name lt br gt  - Major lt br gt  - Email lt br gt  - Lattest lt  div gt   lt  div gt   lt br gt   lt br gt   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

User · Answer

You need to go throgh these scenario   How about using display inline-block   1  Take one  lt div  gt  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

User · Answer

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   lt a href     class  MyLink  gt  lt img src    yourImageIcon png    gt  lt span class  MyLinkText  gt SIGN IN lt  span gt  lt  a gt      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

User · Answer

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   lt div class  site-branding  gt     lt div class  site-branding-logo  gt       lt img src  add Your URI Here  alt  what Is The Image About     gt     lt  div gt   lt  div gt   lt div class  site-branding-text  gt     lt h1 id  site-title  gt Site Title lt  h1 gt     lt h2 id  site-tagline  gt Site Tagline lt  h2 gt   lt  div gt    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

User · Answer

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

User · Answer

Use floats to float the image  the text should wrap beside  http   www w3schools com css css float asp

[html] How to put a text beside the image?

JS Fiddle Demo

Examples related to html

Examples related to image

Examples related to google-sites