title: div aside with position absolute and sticky footer
body: <p>I'm in trouble with the following html layout.</p>
  
  <p>I know that there are other questions about absolute positioning and sticky footer, I tried a lot of solutions but I didn't make this work, so I tried to post the whole layout html code to see if someone can find a solution.</p>
  
  <p>I used <a href="http://ryanfait.com/sticky-footer/" rel="noreferrer">this</a> StickyFooter solution.</p>
  
  <p>The problem is the right bar.</p>
  
  <p>It shoud stay fixed at 25px from the footer, but, as you see, if the bar content grows, the content goes down over the footer and outside the bar bottom border.</p>
  
  <p>Obviously I would the content stay inside the bar, causing the bar to grown and pushing the footer down.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;        
          /* Sticky Footer */
          { margin: 0; }
          html, body, form { height: 100%; }
  
          .wrapper {
              min-height: 100%;
              height: auto !important;
              height: 100%;
              margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
          }
  
          #footerPage, #divPush 
          {
              height: 50px; /* .push must be the same height as .footer */
          }
          /* End / Sticky Footer */
  
  
          body { background-color:#000; width:960px; margin:0 auto; position:relative; font-family:Tahoma, Verdana; }
  
          div.wrapper { background-color:#fff; position:relative; }
  
          #headerPage {  }
              #divHeaderImg { height:100px; }            
              #navPage { height:30px; line-height: 30px; font-size:16px; background-color:#90bfe7; padding:0 10px; position:relative; overflow:hidden; vertical-align: middle; }
              #divSubMenu { background-color: #90BFE7; line-height: 28px; padding: 10px; vertical-align: middle; }
  
          #sectionBar {
              z-index:1000;
              position:absolute; right:10px; top:13px; width:200px; bottom:75px; /* footer height + 25px */
              border:solid 2px #90bfe7; background-color:#ffffff; 
              padding:15px 10px;
          }        
  
          #footerPage { position:relative; padding:10px; background-color:#90bfe7; color:#000; }
  
          #sectionPage { padding:12px 10px 10px 10px; width:700px; }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="wrapper"&gt;
      &lt;div id="sectionBar"&gt;
          &lt;div id="divBarContent"&gt;
              &lt;div&gt;
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
                  Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                  Integer quam turpis, porttitor nec congue convallis, fringilla sit amet purus. Donec at elit mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec ligula tellus, rhoncus eget faucibus vitae, bibendum vel arcu. Pellentesque ante lectus, sodales at interdum sit amet, sollicitudin cursus quam. Fusce eget orci vel eros scelerisque dictum. Cras facilisis, metus vitae venenatis aliquet, nibh sem blandit mi, sit amet viverra massa ipsum ut quam. Vivamus vitae nunc eget justo pellentesque mollis vel non justo. Mauris tempus mattis rutrum. Donec nec viverra nulla. Cras commodo felis sit amet nulla fringilla mollis. 
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="headerPage"&gt;
          &lt;div id="navPage"&gt;menu&lt;/div&gt;
          &lt;div id="divHeaderImg"&gt;&lt;/div&gt;
          &lt;div id="divSubMenu"&gt;sub menu&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="sectionPage"&gt;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
          Nulla vitae ante magna, sed pharetra nunc. Donec tincidunt dignissim mi ac tempus. Fusce ut ante tellus, et egestas libero. Donec facilisis, tellus at sagittis iaculis, arcu orci posuere elit, a luctus odio nunc ac sem. Etiam at erat et neque tristique eleifend. Curabitur blandit turpis sit amet tortor tempor eu euismod ligula sollicitudin. Suspendisse non sapien eu nibh faucibus feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit aliquam metus non imperdiet. Vivamus eu velit a velit pellentesque faucibus. Donec massa erat, fermentum vel laoreet non, commodo sit amet nulla. In placerat, magna ac fringilla varius, justo ante rutrum magna, vel interdum nisi eros vel nibh. Cras aliquet metus tristique velit vulputate mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu dignissim nisi.
      &lt;/div&gt;
      &lt;div id="divPush"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="footerPage"&gt;footer&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>