根据图片大小调整div大小

Question

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?

Here is the HTML code

<div class= "resize">
    <%=link_to image_tag("header.png"), "#" %>
  </div>
<div class="table-container">
<h3>Latest Postings</h3>
<table class = "table table-striped table-bordered table-centered">
  <tr>
    <th class="description">Description</th>
    <th class="location">Location</th>
  </tr>
  <td>[description]</td>
  <td>[Location]</td>
</table>
</div>

And the CSS Code /* table */

.table-container {
  padding-top: 45%;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
}

/*resize container */

  .resize {
   position: absolute;
   left: 0;
   right: 0;
    margin-top: 80px;
     padding-bottom: 80px;
    background-size: 100%;

}

/* resize images */

.resize img {
    width: 100%;
    height: 100%;
}

Thank you

Answer 1

The table is moving up and down because the padding is a percentage, and the image shrinks as it resizes. This is natural to see the content move down as the browser resizes.

Your image does not need to be absolute positioned, and will create space for itself. Does this help? See my code here:

http://jsfiddle.net/38Gba/

.table-container {
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 500px;
}
.resize {
    margin-top: 80px;
    padding-bottom: 80px;

}
.resize img {
    width: 100%;
    height: 100%;
}