Parent Div smaller than child elements contained within

css, html

Solution

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;
}

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

<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>

Fiddle

Problem

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/ ``` #thumbs .preview { width: auto; display: inline; padding: 0; margin: 14px; border:2px solid red; } #thumbs .preview img { height:100px; } ``` ``` <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> ``` Please note the images are just temp placeholders for this question as image names are dynamically generated by our system. Many thanks in advance!

Original source