0

There's a great question / answer here about how to vertically align text next to an image:

Vertically align text next to an image?

However, when I set the vertical-align: top - e.g. http://jsfiddle.net/8ko9vhqj/

HTML

<div id="container">
  <img id="pic" src="http://www.absyx.fr/sites/default/files/imagecache/Preset-1-3/imagefield/test-page/image-focus-test_0.jpg">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac nisi pretium, finibus nisl ut, lacinia felis. Nulla suscipit ornare euismod. Curabitur ultrices maximus sem, id porttitor risus luctus in. Quisque pharetra, sem quis semper faucibus, arcu nisi interdum velit, non consectetur sapien ligula nec lorem. Fusce consectetur dolor sit amet ultricies dapibus. Nunc a ante justo. Aenean orci ipsum, laoreet eu molestie sed, ultrices id dolor. 
</div>

Style

#pic {
  vertical-align: top;
}

I just get 1 line of text at the top of the image rather than the entire paragraph. What am I missing?

Community
  • 1
  • 1
Snowcrash
  • 80,579
  • 89
  • 266
  • 376

2 Answers2

1

edit your code like this:

#pic {
    float:left;
    margin-right:10px
}

see snippet below:

#pic {
  float: left;
  margin-right: 10px
}
<div id="container">
  <img id="pic" src="http://www.absyx.fr/sites/default/files/imagecache/Preset-1-3/imagefield/test-page/image-focus-test_0.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac nisi pretium, finibus nisl ut, lacinia felis. Nulla suscipit ornare euismod. Curabitur ultrices maximus sem, id porttitor risus luctus in. Quisque pharetra, sem quis semper faucibus,
  arcu nisi interdum velit, non consectetur sapien ligula nec lorem. Fusce consectetur dolor sit amet ultricies dapibus. Nunc a ante justo. Aenean orci ipsum, laoreet eu molestie sed, ultrices id dolor.</div>
dippas
  • 58,591
  • 15
  • 114
  • 126
1

I think what you really want is to float the image left:

#pic {
    float:left;
}

jsFiddle example

j08691
  • 204,283
  • 31
  • 260
  • 272