Как сделать что бы DIV элементы внутри другого DIV уменьшались в размерах, а не переносились?

Всем привет!

Есть DIV элемент шириной 100% от ширины браузера.

В него нужно разместить 4 div элемента одинаковой ширины и высоты. Между ними небольшое расстояние. В одну линию. А когда экран уменьшается, необходимо добиться того, что бы все значения внутри этих дивов (картинки, текст) уменьшались тоже. При любом размере экрана, необходимо что бы были в ряд 4 одинаковых DIV элемента, одинаковой ширины и высоты.

сделал так, не работает, прыгает все, и на разном разрешении разный результат.

.otsek{
display:inline-block;
max-width:20%;
margin:3px;
font-size:60%;
padding:10px;
}
.otsek img{
max-width:100%;
}