Designing fluid width pages

Question

I'm building an internal web app and I want to make use of the entire page and as such have opted for a flexi-width design. The problem that I keep running into is that inline-block is causing things to be wrapped onto the next line in lower screen resolutions.

Am I doing something wrong or should I just ignore inline-block and float my elements? For reference I don't have to be concerned about browsers as I know all the users will be using the latest Chrome

Edit http://jsfiddle.net/nH4GY/

This works fine at 1900x1080 but as you lower the resolution everything begins to wrap onto the next line.

Answer 1

for this type of functionality you can use display:table-cell;

body{
    display:table;
}
.pair
{
    width: 31%;
    padding: 1%;
    display:table-cell;
} 

Check this http://jsfiddle.net/sandeep/nH4GY/6/

For webkit based browsers like chrome you can use Flexible Box Model css .

Check this http://jsfiddle.net/sandeep/GYrr7/