inline div not working - html

Question

I am attempting to show a thumbnail picture and below the thumbnail, I want to have some text. Ideally I think I want to wrap the image and the text in a div whose style is set to be inline.
So imagine 3 pictures going across the screen from left to right and underneath each picture is a description of the picture.
How do I accomplish that?

Answer 1

Im with seb nukem here. I would use display inline-block.

Answer 2

One way you could do this is by enclosing each image and description pair within a div element and then just floating those divs to the left.
DEMO: http://codepen.io/sajadtorkamani/pen/xbbrzE
HTML
<div class="gallery">
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
<div>
<img src="http://placehold.it/300x200" />
<p>Description goes here...</p>
</div>
</div>
CSS
.gallery div {
float: left;
margin-right: 1em;
}

Answer 3

Put each image + caption within an inline or floating block:
CSS
div.image {
display:inline-block; /* or use float:left; */
}
.caption {
}
HTML
<div class="image"><!-- one div per image -->
<img src="image.png">
<div class="caption">Caption text here</div>
</div>
<div class="image">
<img src="image2.png">
<div class="caption">Caption text here</div>
</div>
...
demo: http://jsfiddle.net/5s5s4otc/

Answer 4

I would use the HTML <table> element. Try something like this:
table {
width: 100%;
}
td {
text-align: center;
}
<table>
<tr>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
<td>
<img src="http://placekitten.com/g/200/300" />
</td>
</tr>
<tr>
<td>Description goes here.</td>
<td>Description goes here.</td>
<td>Description goes here.</td>
</tr>
</table>
I hope this helps! Leave a comment below if you need additional help.

Answer 5

DEMO: http://jsfiddle.net/pwee167/67oc6k7r/\
The outcome will be something like this:
HTML:
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
<div class="container">
<img src="http://png-1.findicons.com/files/icons/85/kids/128/thumbnail.png"/>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</div>
CSS:
.container
{
float: left;
max-width: 128px;
}
Note: I assumed the dimensions of your thumbnails will be the same (as is in most use cases of thumbnails), which allowed me to set the maximum width (using max-width) of the container holding the image and the description. This will prevent the text from overflowing, and expanding the container.

Answer 6

Use either float or inline-block on the container divs. See jFiddle here: http://jsfiddle.net/ckk2jprr/
HTML
<div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
<div class="pic">
<img src="http://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" />
<div>This is some text</div>
</div>
</div>
CSS
.pic{
float: left;
}