title: Container size in HTML?
body: <p><strong>Edit: I resolved this by changing the position of .firstlayer to absolute.  This makes the setting left/right margins to auto not work to center the container, so I set left:0; and right:0; which, when I define a width and mark it as important, centered the container.  Thank you all for your help!</strong> </p>
  
  <p>To clarify, I'm trying to get the  to extend to the bottom of the page.  All my attempts so far have been unsuccessful.  Also, all of the height attributes are in .firstlayer for browser compatibility. </p>
  
  <p>Annotated screenshots can be found <a href="http://imgur.com/a/q2np8#0" rel="nofollow noreferrer">here</a>: (I'm just doing layout now, so it looks silly).
  <img src="https://i.imgur.com/PyLra.png" alt="Top looks fine">
  <img src="https://i.imgur.com/weyYj.png" alt="Bottom doesn&#39;t"></p>
  
  <p>I have a pretty silly question.  I'm working on a webpage, and I'm trying to get a <code>&lt;span&gt;</code> area to extend all the way to the bottom of the page.  I've searched online for answers, and I've made sure Iset the body and html height to 100% and the container height to auto/min-height to 100%, but it's still only reaching to the page break. </p>
  
  <p>Does anyone have any suggestions on how to fix this?</p>
  
  <p>My CSS is here:</p>
  
  <pre><code>html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{
      border:0 none;
      font:inherit;
      margin:0;
      padding:0;
      }
  
  html, body { width:100%; height:100%; }
  
  body { background: #ff8 url("blue.jpg") repeat fixed; font-family: Helvetica, San-Serif; }
  
  
  
      /*----- GRID -----*/
  .container {
      background: none;
      overflow: none;
      display: block;
      z-index: 1;
      } 
  
  .firstlayer { 
      background-color: #fff !important;
      height: auto !important; 
      min-height: 100%; 
      height: 100%;
      width: 960px; 
      margin:0 auto;
      border-left: solid 1px #000;  border-right: solid 1px #000;
      }
  
  .padded  {margin-left:20px; margin-right:20px;}
  
  span { height:auto; }
      .onecol { width:8.33%; float:left; }
      .twocols { width:16.66%;  float:left; }
      .threecols { width:25%;  float:left; }
      .fourcols { width:33.33%;  float:left; }
      .fivecols { width:41.66%;  float:left; }
      .sixcols { width:50%;  float:left; }
      .sevencols { width:58.33%;  float:left; }
      .eightcols { width:66.66%;  float:left; }
      .ninecols { width:75%; float:left;  }
      .tencols { width:83.33%;  float:left; }
      .elevencols { width:91.66%;  float:left; }
      .allcols { width:100%;  float:left; }
  
  footer {
      font-size: 0.75em;
      color: #fff;
      background: 100px #000;
      padding:10px 20px 10px 20px;
      bottom: 0px; 
      height:7em;  
      }
  </code></pre>
  
  <hr>
  
  <p>And my HTML code is here:</p>
  
  <pre><code>    &lt;!--Begin the content area--&gt;
  
      &lt;span class="container firstlayer"&gt;
          &lt;span class="container  padded"&gt;
  
  &lt;!--TITLE AND SUBTITLE--&gt;
              &lt;span class="container allcols"&gt;
                  &lt;h1&gt;Stand-in Title&lt;/h1&gt;
                  &lt;h1 class="subtitle"&gt;Stand-in Subtitle&lt;/h1&gt;
              &lt;/span&gt;
  
  &lt;!--MEDIA PLACEHOLDER--&gt;
              &lt;span style="height:400px; background-color:#000;" class="container allcols"&gt;
              &lt;/span&gt;
  
  &lt;!--ROW ZERO: 2 COLS--&gt;
              &lt;span class="allcols" style="padding-top:1em;"&gt; 
                  &lt;span class="container sixcols"&gt;
                      &lt;h2&gt;Subtitle&lt;/h2&gt;
                      &lt;p&gt; Lorem ipsum &lt;/p&gt;
                  &lt;/span&gt;
                  &lt;span class="container sixcols"&gt;
                      &lt;h2&gt;Subtitle&lt;/h2&gt;
                      &lt;p&gt; Lorem ipsum &lt;/p&gt;
                  &lt;/span&gt;
              &lt;/span&gt;  
  
          &lt;/span&gt;
      &lt;/span&gt; 
  </code></pre>