J Spring J Spring - 6 months ago 49
HTML Question

Parent Div smaller than child elements contained within

I have a container (called

#thumbs
) and within that 4 child containers (
.preview
) and within them 2 images displayed inline.

I am trying to place a border around
.preview
. However, that container is shorter than the images themselves and I cannot figure out how to make them the same height.

Please see my fiddle here http://jsfiddle.net/jayden/7Uy2v/

HTML:

<div id="thumbs">
<div class="preview">
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
</div>
<div class="preview">
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
</div>
<div class="preview">
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
</div>
<div class="preview">
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
<img src="http://st.depositphotos.com/1001435/3316/i/950/depositphotos_33165059-Happy-Person-in-the-field.jpg"/>
</div>
</div>


CSS:

#thumbs .preview {
width: auto;
display: inline;
padding: 0;
margin: 14px;
border:2px solid red;
}

#thumbs .preview img {
height:100px;
}


Please note the images are just temp placeholders for this question as image names are dynamically generated by our system.

Many thanks in advance!

Answer

Change to display:inline-block instead of display:inline

#thumbs .preview {
  width: auto;
  display: inline-block; /* Change */
  padding: 0;
  margin: 14px;
  border: 2px solid red;
}

Fiddle