title: Left - Middle - Right content with reponsive elements
body: <p>The contents mush be responsive so that they don't jumble up on each other
  HTML :</p>
  
  <pre><code>&lt;div id="ContentPanel1"&gt;
    &lt;div id="ContentLeft1"&gt;  Mars (Distance: 100) &lt;/div&gt;
    &lt;div id="ContentMiddle1"&gt; Middle &lt;/div&gt;
    &lt;div id="ContentRight1"&gt; Right &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>#ContentPanel1 {
      text-align:center
  }
  #ContentLeft1 {
      background:Yellow;
      float: left;
      width: 80px;
  }
  #ContentMiddle1 {
      background:Orange;
      float: left;
      width: calc(100% - 160px);
  }
  #ContentRight1 {
      background:Blue;
      float: right;
      width: 80px;
  }
  </code></pre>
  
  <p>I know most of the answers are already in the stackoverflow but I don't think any of them is responsive design, they all are hard coded. That's why I as asking this question again...</p>