title: Multiple CSS issues with DIV Height 100%, and content within
body: <p>Kind of a conundrum. I have a div that is full height of browser with a background set as 100% size, and image content, in two inline divs set to vertical-align middle content with each other.</p>
  
  <p>One of the divs, the image is "bigger" than the view port (this is needed unfortunately), so I have overflow: hidden set to the containing div of these two inner divs to hide whatever is outside the viewport (height 100%)</p>
  
  <p>I know its sound weird to explain, so I set up a CodePen</p>
  
  <p><a href="https://codepen.io/deelite310/pen/bjvKPG" rel="nofollow noreferrer">https://codepen.io/deelite310/pen/bjvKPG</a></p>
  
  <p>The issue I'm running into are several:</p>
  
  <p>1) The right div content since the image is bigger than the div full height, its causing the left div content to "vertical align" with that full height, instead of the containing DIV's 100% height. That means the left div content is disappearing in the overflow: hidden;</p>
  
  <p>2) When resizing the browser up and down (so say a view port of 1680x600), the content in the main section is covered up by the footer area (so the images disappear or are being covered up, the background isn't resizing down, etc)</p>
  
  <p>so my questions are:</p>
  
  <p>1) Resize divs and content if browser is not a normal viewport settings (like 1680x600) so that the main section shows fully, without the footer covering it up</p>
  
  <p>2) Where both divs in the main section, show all the content, despite one side having content extending past the and hidden by overflow: hidden;</p>
  
  <p>some of my CSS, you can see the whole thing at the CodePen link above</p>
  
  <pre><code>section {
    width: 100%;
    min-height: 100%;
    display: table;
    height: inherit;
    margin: 0;
    padding: 0;
    background: url("https://placeimg.com/1000/400/tech/sepia") no-repeat center    top;
    background-size: 100%;
  }
  #hero #col {display: inline-block; width: 50%; verticle-align: middle;}
  #hero #col:nth-child(1) img {width: 65%; height: auto;}
  
  .place {margin-bottom: 20%;}
  
  #footer {width: 100%; height: 400px; text-align: center; border-top: 1px solid #000}
  #footer p {font-weight: bold; font-size: 32px; margin-top: 3%;}
  </code></pre>