Question

I want to build ‘rubber’ interface, so I use div with width in %, but when I try to fill 100% of width with several divs, they not intermix on line, but in suome they have 100%. If use table then all fine. Here are examples:

<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>

If size of you window is enough, they all will appear right, but if you make it smaller, someone jump off their line.
If I do not clearly expressed, I want to display div in a single line in not depending on the width.

Answer 1

The 1px border adds to the width of the boxes. So your boxes will have a width of 50%+1px, 10%+1px and so on.