Question

I am trying to put the images side by side with captions.

That works out of the box by default doing the following:

<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<img src="2.jpg" width=320 height=240 alt="Image 2">
<img src="3.jpg" width=320 height=240 alt="Image 3">
<img src="4.jpg" width=320 height=240 alt="Image 4">
</figure>

I get the list of images side by side depending if my width allows it. I get what i want. is such 2 columns of images:

Image 1 Image 2
Image 3 Image 4

Now if i add figcaption as following:

<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<figcaption>caption 1</figcaption>
<img src="2.jpg" width=320 height=240 alt="Image 2">
<figcaption>caption 2</figcaption>
<img src="3.jpg" width=320 height=240 alt="Image 3">
<figcaption>caption 3</figcaption>
<img src="4.jpg" width=320 height=240 alt="Image 4">
<figcaption>capton 4</figcaption>
</figure>

Everything looks like this:

Image 1
caption 1 
Image 2 
caption 2 
Image 3  
caption 3 
Image 4
caption 4

I also was playing with lists and hierarchy and css.

The question is how can i make the following ?

Image 1 Image 2 
caption 1 caption 2 
image 3 Image 4   
caption 3 caption 4

Many Thanks,
Karolis

Answer 1

First, we need to fix your mark-up (only 1 figcaption allowed per figure). Then we need to add some sort of container element. I chose aside as my container, but it can be any block level element that feels appropriate (div, section, etc.):

http://jsfiddle.net/ZksyN/2/

<aside class="figures">
<figure>
<img src="1.jpg" width=320 height=240 alt="Image 1">
<figcaption>caption 1</figcaption>
</figure>

<figure>
<img src="2.jpg" width=320 height=240 alt="Image 2">
<figcaption>caption 2</figcaption>
</figure>

<figure>
<img src="3.jpg" width=320 height=240 alt="Image 3">
<figcaption>caption 3</figcaption>
</figure>

<figure>
<img src="4.jpg" width=320 height=240 alt="Image 4">
<figcaption>capton 4</figcaption>
</figure>
</aside>

Just enough CSS here to get the elements to appear inline. You’ll probably want to reduce the left/right margins on figure. I’ve also left off any sort of restrictions on how many columns must appear, so it is responsive by default (narrow devices will get 1 column, extra wide devices could get 3 or 4 columns if they’ll fit). If you want to add a hard upper limit on the number of columns, add a max-width to aside.figures equal to (image width + side margins) * number of columns.

aside.figures {
    overflow: hidden; /* only needed if floating the child elements instead of using inline-block */
}

aside.figures figure {
    display: inline-block;
    border: 1px solid;
}