title: Resize div according to image size
body: <p>I am new to CSS and HTML and got the following problem.
  I created a banner that holds an image and resizes accordingly to the screen size.
  Now, I want my content underneath to resize according to the image. The content in this case is a table.
  When I decrease the screen size, the table moves up(padding decreases) and when I increase the screen size, the content moves down. This is probably because the image size changes.
  Do you know how I can resize the table accordingly?</p>
  
  <p>Here is the HTML code</p>
  
  <pre><code>&lt;div class= "resize"&gt;
      &lt;%=link_to image_tag("header.png"), "#" %&gt;
    &lt;/div&gt;
  &lt;div class="table-container"&gt;
  &lt;h3&gt;Latest Postings&lt;/h3&gt;
  &lt;table class = "table table-striped table-bordered table-centered"&gt;
    &lt;tr&gt;
      &lt;th class="description"&gt;Description&lt;/th&gt;
      &lt;th class="location"&gt;Location&lt;/th&gt;
    &lt;/tr&gt;
    &lt;td&gt;[description]&lt;/td&gt;
    &lt;td&gt;[Location]&lt;/td&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS Code
  /* table */</p>
  
  <pre><code>.table-container {
    padding-top: 45%;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 500px;
  }
  </code></pre>
  
  <p>/*resize container */</p>
  
  <pre><code>  .resize {
     position: absolute;
     left: 0;
     right: 0;
      margin-top: 80px;
       padding-bottom: 80px;
      background-size: 100%;
  
  }
  </code></pre>
  
  <p>/* resize images */</p>
  
  <pre><code>.resize img {
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>Thank you</p>