What you're inquiring about is actually a somewhat intricate layout, although it primarily involves responsiveness. Essentially, the goal is to have two divs that expand to fill the screen (similar to cells in a table) and then have a third div move up into the row once the screen width reaches a certain point.

It's impossible to achieve both the specified dimensions and fill the screen at all widths, as mentioned by Clark. For instance, at 505 pixels wide, two divs will fit with 5 pixels of gap between them. Three divs won't fit until the width reaches at least 610 pixels, leaving a gap where the divs won't completely fill the screen.

Using Media Queries is likely the best approach for this scenario, but the margin may need to be defined as a percentage rather than a fixed pixel value like 5 (unless using jQuery or a similar solution).

A modified version of Clark's answer can be found in this fiddle http://jsfiddle.net/UHqWF/2/

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    max-width:250px;
    min-width:200px;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        max-height:250px;
        min-height:200px;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}

However, the layout can be a bit jumpy as explained earlier.

An alternative solution would be to remove the width restrictions (eliminating occasional gaps on the right), like shown here http://jsfiddle.net/UHqWF/3/

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        min-height:200px;
        text-align:center;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}​

Another option is to center the extra space rather than having it at the edges, showcased here http://jsfiddle.net/UHqWF/4/

body {
    background:#edeee6;
}

.imageitem {
    -moz-box-sizing:border-box;
 -webkit-box-sizing:border-box;
         box-sizing:border-box;
    float:left;
    padding:5px;
    width:100%;
}

    .imageitem div {
        background:#4e84a4;
        max-width:250px;
        margin:0 auto;
        min-height:200px;
        text-align:center;
    }

@media all and (min-width:420px) {
    .imageitem {
        width:50%;
    }
}

@media all and (min-width:630px) {
    .imageitem {
        width:33.33333%;
    }
}

@media all and (min-width:840px) {
    .imageitem {
        width:25%;
    }
}

@media all and (min-width:1050px) {
    .imageitem {
        width:20%;
    }
}​

I developed a unique jQuery plugin that takes advantage of CSS3 columns in modern browsers while gracefully falling back to floated columns for older browsers like IE 9 and below.

When resizing, the items maintain their aspect ratio to provide a smooth transition. While achieving a completely fluid look may be challenging, the transition appears relatively smooth depending on the browser being used.

The plugin offers various customizable settings, all of which are well-documented within the code.

To implement the plugin, simply use the following code:

$('#container').adjustColumns({/* options*/});

My goal in creating this plugin was to facilitate the learning process for both CSS3 techniques and fallback methods. I am more than willing to offer assistance and support for using this plugin.

Check out the DEMO: http://jsfiddle.net/SbvGJ/show/

Firstly, ensuring a minimum width of 200px and a maximum width of 250px:

• For screen sizes between 750px and 800px, there will be a gap ranging up to 50px
• For screen sizes between 500px and 600px, the gap can extend up to 100px
• For screen sizes between 250px and 400px, the gap might reach up to 150px

This is just how the layout calculations work out.

If you are comfortable with that, consider using media queries.

You could implement something like this in your CSS:

.imageitem {
    background-color: blue;
    //I've simplified by setting margin to 0.
    //You may need to adjust margin calculations or revise HTML structure for margins
    //Consider using an inner div with a margin instead
    margin: 0px;
    min-width: 200px;
    min-height: 200px;
    max-width: 250px;
    max-height: 250px;
    float: left;
}

@media all and (max-width: 250px) and (min-width: 200px) {
    .imageitem {
        width: 100%;
    }
}

@media all and (max-width: 500px) and (min-width: 400px) {
    .imageitem {
        width: 50%;
    }
}

@media all and (max-width: 750px) and (min-width: 600px) {
    .imageitem {
        width: 33%;
    }
}

@media all and (max-width: 999px) and (min-width: 800px) {
    .imageitem {
        width: 25%;
    }
}

@media all and (max-width: 1249px) and (min-width: 1000px) {
    .imageitem {
        width: 20%;
    }
}

If you also require height resizing, create similar queries for min-height and max-height. Ensure to set the height on the html, body selector as well.