How to scale images using display: inline-block when resizing browser?

Question

<div class="pagework">
<h1>WORK</h1>
<div class="pageworkgallery">

<ul>
<li><img src="FRONT OPERAH crop.png" width="500" height="400" /></li>
<li><img src="anedo front crop.png" width="500" height="400" /></li>
<li><img src="3 front tilt crop.png" width="500" height="400" /></li>
<li><img src="gfx logo insitu.png" width="500" height="400" /></li>
<li><img src="student excellence awards crop.jpg" width="500" height="400" /></li>
<li><img src="bodegas wine poster mockup crop.png" width="500" height="400" /></li>
</ul>

</div>
</div>

CSS

h1{
font-family: 'rex_bold_bold'; 
font-size: 40px; 
margin-top: 60px; 
letter-spacing: 15px
} 
.pagework{
height: 1500px; 
background-color:#FFF; 
margin: 0 auto
}
.pageworkgallery{
height:1500px; 
margin: 70px 70px 70px 70px; 
max-width:100%
}
.pageworkgallery ul{
list-style:none
}
.pageworkgallery ul li{
display:inline-block; 
padding: 4px
}

When I resize browser smaller the images go under one another into 1 column instead of staying at 2. I want it to stay at 2 column.

When the broswer window is big: http://oi60.tinypic.com/15wgz1x.jpg

When I resize browser smaller: http://oi60.tinypic.com/2n8as1c.jpg

Answer 1

Chage <li> structure to this

<li><div class="wrapper"><img src="FRONT OPERAH crop.png" width="500" height="400" /></div></li>

& css to this

.pageworkgallery ul{
    list-style:none
}

.pageworkgallery ul li{
    display:inline-block;
    width:50%;
    float:left;
}

.pageworkgallery ul li .wrapper{
    display:block;
    padding:4px;
    text-align:center;
}

.pageworkgallery ul li img{
    display:inline-block;
    width:100%;
    height:100%;
    max-width:500px;
}