HTML5 Image Caption: Image moves to next row

Question

I am trying to create an image gallery. To display captions beneath my images I am using the following code

<div>

 <figure>
<img src="sample-image.png" />
<figcaption>Caption Here</figcaption>
</figure>

 </div>

Now the problem is when I run the gallery page the images looks like following(figure-1). The second image goes down. I want to display the images like in figure-2, but I don't know what CSS code to write for this or how to fix it. Would you please kindly help me?

Thanks in Advance :)

Answer 1

basically just set display: inline-block; white-space: normal; for figure and white-space: nowrap; to theirs parent (assuming your figures are wrapped in a common container)

Then you will need to make some small adjustments using other properties, (like vertical-align)

see this example fiddle: http://jsfiddle.net/CDkNV/