title: How to anchor a <div> to the lower left of a table cell without destroying responsiveness?
body: <p><strong>The short of it is</strong> that, in a table, on a responsive web page, I added a <code>&lt;div&gt;</code> within the <code>&lt;td&gt;</code>s and anchored it to the bottom left of the cell by putting <code>position: relative</code> on the <code>&lt;td&gt;</code> and </p>
  
  <pre><code>position: absolute;
  bottom: 0;
  left: 0;
  </code></pre>
  
  <p>on the <code>&lt;div&gt;</code>.</p>
  
  <p>That seems to have broken the page's responsiveness. Now, there is horizontal overflow scrolling on the whole page at a breakpoint of about <code>1260px</code>. Above that width, the page is fine; below that point, the horizontal overflow scrolling appears.</p>
  
  <p>I need a CSS/jQuery solution to anchor the <code>&lt;div&gt;</code> to the table cell's lower left cornor without destroying the page's responsiveness. What I'm looking for is something like <code>float: left;</code> and <code>float: bottom;</code> together.</p>
  
  <p>I tried making the <code>&lt;td&gt;</code> <code>display: flex;</code>, but that forced all the cells into a long column at the left.</p>
  
  <p><strong>My question is two fold:</strong></p>
  
  <p><strong>1)</strong> Why was the page's responsiveness disrupted? (I'm learning. I'd like to understand.)</p>
  
  <p><strong>2)</strong> How can I achieve the goal of locking the <code>&lt;div&gt;</code> to the lower left and still keep the page responsive?</p>
  
  <p>Currently, a typical <code>&lt;td&gt;</code> looks like this:</p>
  
  <pre><code>        &lt;td id="x0900A"&gt;                    &lt;!-- 0900 room A --&gt;
              &lt;p class="classTitle"&gt;
              &lt;/p&gt;
              &lt;div class="classDescrip"&gt;
              &lt;/div&gt;
              &lt;p class="instructor"&gt;
              &lt;/p&gt;
              &lt;p class="gender"&gt;
              &lt;/p&gt;
              &lt;div class="instructorBio"&gt;
              &lt;/div&gt;
              &lt;div class="instructorImg"&gt;
              &lt;/div&gt;
              &lt;div id="x0900A-roomCount" class="roomCount"&gt;
              &lt;p id="x0900A-attending" class="attending"&gt;attending&lt;/p&gt;
              &lt;p id="x0900A-capacity" class="capacity"&gt;capacity&lt;/p&gt;
              &lt;/div&gt;
          &lt;/td&gt;
  </code></pre>
  
  <p>It has this CSS:</p>
  
  <pre><code>.schedule td {
    position: relative;
  }
  div[id$=roomCount] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    margin: 10px 10px 0 5px;
    text-align: left;
    opacity: 0.60;
  }
  </code></pre>
  
  <p>That worked to position the roomCount <code>&lt;div&gt;</code> where I want it, <em>but</em>, now, there is horizontal overflow scrolling on the whole page (<code>&lt;body&gt;</code>).</p>
  
  <p><strong>Edit/Update:</strong></p>
  
  <p>I reworked the question, editing out irrlevant information, I'm hoping this shorter, reworked version will get some attention.</p>