I'm having trouble making my in-line blocks shrink instead of wrapping. The layout of the images is currently like this:
AAA BBB
CCCCCC
As the window narrows to the width of C, I want all the images to shrink together. Right now, what is happening is that C shrinks and B wraps under A. If I apply whitespace:nowrap to the parent DIV, A and B do not wrap but they also do not shrink. Here's the code I have so far:
<div id="container">
<div class="small_pic"><img a></div>
<div class="small_pic"><img b></div>
<div class="large_pic"><img c></div>
</div>
#container {
margin-left:auto;
margin-right:auto;
width: 486px;
max-width:100%;
}
.small_pic {
width:220px;
max-width:100%;
display:inline-block;
height:auto;
}
.large_pic {
width:480px;
max-width:100%;
display:inline-block;
height:auto;
}
Thank you!