title: Two container next to each other at full width (each container can be hidden)
body: <p>I searched a lot, but now  want to ask because I found no answer:</p>
  
  <p>If have two div elements that should be located next to each other with full width (each exactly 50% of the full width). It could be that the first or the second div is hidden (style="display=none"). In this case the other div should be displayed in full width.</p>
  
  <p>My solution is this:</p>
  
  <pre><code>&lt;table style="width: 100%;"&gt;
      &lt;tr&gt;
          &lt;td style="padding: 0px;"&gt;
              &lt;div id="div1"&gt;
                  ...
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td style="padding: 0px;"&gt;
              &lt;div id="div2"&gt;
                 ...
              &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>That works almost perfect, BUT when both divs are displayed the first one seems to be 55% and the second one 45% of the width.</p>
  
  <p>If course I can set the width of the div when hiding the other to 100%, but I want to avoid doing that. </p>
  
  <p>Does anyone have a solution to make them both 50% when both are displayed.</p>