title: Responsive div over div with text align
body: <p>Not sure if its possible but I have a profile page where I have a div (banner), a second div (user-info), and a third div (profile picture). I'm trying to make it a responsive design but when i scroll the text dont align with the profile picture. I tried moving the picture out of the wrapper (div) to work on the second div (profile-info) but it wont align how I want it</p>
  
  <p>Heres a picture of how I want it to look:
  <a href="https://i.stack.imgur.com/zaKDu.png" rel="nofollow"><img src="https://i.stack.imgur.com/zaKDu.png" alt="Profile sketch"></a></p>
  
  <p>In the picture the second div (profile-info) is at the bottom of the first div (banner) and align right next to the third div (profile picture). But i cant get the code to work how I want it to.</p>
  
  <p>html:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
    &lt;!--Profile picture, banner, and main information--&gt;
      &lt;div class="profile-wrapper"&gt;
        &lt;!--Banner--&gt;
        &lt;img class="banner" src="/assets/images/banner/default.png" /&gt;
  
  
        &lt;!--user information--&gt;
        &lt;div class="user-information"&gt;
          &lt;h1&gt;@Username&lt;/h1&gt;
          &lt;p&gt;Firstname Lastname&lt;/p&gt;
        &lt;/div&gt;
        &lt;!--profile picture--&gt;
        &lt;img class="avatar" src="/assets/images/users/default.png" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/* **************************************************************************************
  ///////////////////////Main Style////////////////////////////////////////////////////////
  ************************************************************************************** */
      .avatar {
          position:relative;
          border: 2px solid #fff;
          border-radius:5px;
  
          margin-top:-13%;
          margin-left: 5%;
  
          width:15%;
          max-height:180px;
          max-width:180px;
          min-height:90px;
          min-width:90px;
          height:auto;
      }
  
      .wrapper {
          min-height: 100%;
          height: auto !important;
          height: 100%
          margin:0 auto;
      }
  
      .banner {
          position:relative;
          border-bottom: 2px solid #fff;
          margin-top:0;
          height:40%;
          max-height:420px;
          min-height:340px;
  
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          -ms-flex-pack: center;
          justify-content: center;
          width: 100%;
          height: 50vh;
      }
  
      .profile-wrapper {
          margin-top:0;
          margin:0 auto;
          overflow:hidden;
          width:100%;
      }
  
      .user-information {
          color:#fff;
          position:relative;
          font-weight:500;
  
          width:100%;
          height:10%;
  
          background-color:#000;
          padding:5px;
          margin-bottom:0;
          background:rgb(0,0,0 .8);
      }
  
      .user-information h1 {
          font-size: 20px;
      }
  
      .user-settings {
          float:right;
          font-size:24px;
          padding:5px;
      }
  
  /* **************************************************************************************
  ///////////////////////Tablet////////////////////////////////////////////////////////////
  ************************************************************************************** */
  @media all and (max-width: 1024px) {
      .banner {
          height:20%;
      }
  }
  
  
  
  /* **************************************************************************************
  ///////////////////////Phone/////////////////////////////////////////////////////////////
  ************************************************************************************** */
  @media all and (max-width: 768px) {
      .banner {
          height:20%;
      }
  }
  </code></pre>
  
  <p>If needed heres the main css:</p>
  
  <pre><code>/* Basic Styles */
  @import 'https://fonts.googleapis.com/css?family=Roboto:300,400,500';
  @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
  
  
  * { margin:0; padding:0; }
  html { overflow:auto; height:100%; }
  body { background-color: #e9ebee; margin:0; padding:0; font-size:10px; cursor:default; height:100%; }
  body, html {font:13px "open sans",sans-serif;  overflow-x:hidden;}
  
  /* Base Styles
  ********************************************************************* */
  html {
    font-size: 62.5%;
    width: 100%;
    height: 100%;
  }
  body {
    background: #e9ebee;
    height: 100%;
    font-size: 1.5em;
    line-height: 1.6;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif;
    color: #222;
  
  }
  </code></pre>