How to put HTML picture / text on the same line in

Question

I've been using HTML/CSS for ~2 weeks now.

I'm having trouble getting the text on my site to sit right next to the puppy thumbnail, rather than under it.

If I float both the text and the picture, they are side by side, but the text is first, not the picture. Why would this be? The text comes AFTER the picture in the HTML.

Here is the JSFiddle. I've never used JSF before so I hope I did it correctly. I don't know why the pictures in the JSF aren't working (the external link ones (puppies)).

http://jsfiddle.net/nhv54/

Answer 1

When lining up images and text, I like to use inline or inline-block elements rather than put them inside a block element. Here is an example that should work for your case in particular.

Html

<p>
    Vertically centered text
    <img src="http://www.suffolkdogday.com/wp-content/themes/sdd/images/dog.png" style="vertical-align:middle">
</p>​

Answer 2

Check this out http://jsfiddle.net/nhv54/3/

Things to notice in CSS

.pull-left * {
         float: left;    
}

And every div you want content to be on one line should have class "pull-left"

<div class = "ProjectsModules pull-left" id = "example1">
  <img src = "http://royalk9.ca/uploads/images/_thumbs/beagle-puppy               .jpg"/>
  <div id = "ProjectsModulesText">
    <h1> Jim </h1>
    <p>
      stuff
    </p>
  </div>
</div>

Answer 3

You can also set vertical-align: middle; on whatever tag your text is inside, presumably a p.

Answer 4

You could use inline-blocks

I updated your JSFIDDLE

http://jsfiddle.net/nhv54/16/