I have the following:

<div id="hp_imgs">
    <img src="/images/hp/1.jpg">
    <img src="/images/hp/2.jpg">
    <img src="/images/hp/3.jpg">
    <img src="/images/hp/4.jpg">
    <img src="/images/hp/5.jpg">
    <img src="/images/hp/6.jpg">
    <img src="/images/hp/7.jpg">
    <img src="/images/hp/8.jpg">
</div>

The images were sized when created to form a grid of sorts, so need to be in the order where they are.

Consequently, when/if the page is resized I want the images to resize and stay where they are.

Here's what I'm trying but images are simply staying the same size and not resizing:

#hp_imgs {
    width:66%;
    float:left;
}

#hp_imgs img {
    float:left;
    margin:2px;
    border-radius:4px;
    display: block;
    max-width:100%;
    height:100%;
}

Is there a better/different way to achieve this?

FIDDLE

Here's a sample to play with: Fiddle