Некоторое пространство между div в строке

Я хочу создать «резиновый» интерфейс, поэтому я использую div с шириной в%, но когда я пытаюсь заполнить 100% ширины несколькими div, они не смешиваются в строке, а в некоторых случаях у них 100%. Если использовать таблицу, тогда все в порядке. Вот примеры:

<div style='white-space:nowrap;'>
    <div style='width:50%;border: 1px solid #4e5e6e;display:inline-table;'>A1</div>
    <div style='width:50%;border: 1px solid #a2f2d4;display:inline-table;'>A2</div>
</div>
<div style='white-space:nowrap;'>
    <div style='width:10%;border: 1px solid #4e5e6e;float:left'>A1</div>
    <div style='width:40%;border: 1px solid #a2f2d4;float:left'>A2</div>
    <div style='width:40%;border: 1px solid #4e5e6e;float:left'>A3</div>
    <div style='width:10%;border: 1px solid #a2f2d4;float:left'>A4</div>
</div>
<table style='width:100%'><tr style="width:100%";>
    <td style='width:10%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:40%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:40%;border: 1px solid #4e5e6e;'>A1</td>
    <td style='width:10%;border: 1px solid #4e5e6e;'>A1</td>
</td></table>

Если размер вашего окна достаточен, все они будут отображаться правильно, но если вы уменьшите его, кто-то спрыгнет со своей строки. Если я не ясно выразился, я хочу отобразить div в одну строку вне зависимости от ширины.