title: CSS positioning driving me nuts
body: <p>I have multiple images that take up the entire screen and auto resize (positioned absolutely and some JavaScript) however for the life of me I can not get content to be placed UNDER that <code>div</code>. I put the images in a <code>div</code> container and that <code>div</code> is positioned relative to every other one. The <code>div</code> with the necessary content is relative as well. The images are absolute within a relative <code>div</code>. Can someone take a look at my code and let me know exactly whats going on? I just can't figure it out, and after all the research I have done I do not see why it isn't working. Thank You! Below is the external style sheet and the HTML. I believe the issue is within the actual HTML for <code>div</code> cycler (where the images are), because I embedded the style within the HTML for that <code>div</code> and the content at least does fall under the top <code>div</code>s (defined in style sheet).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@charset "utf-8";
  /* CSS Document */
  
  #mainbody
   { margin:0px; padding: 0px; border: 0px; overflow: scroll;}
  
  #topnav.mainnav {
      background-color: rgb(27, 89, 127);
      height: 45px;
      width: 100%;
      max-width: 3000px;
      max-height: 45px;
      border: 0;
      margin: 0 auto;
      margin-top: -45px;
      padding: 0;
      text-align: center;
      /*box-shadow: 2px 2px 3px 2px #333;*/
          display: table; position: fixed;z-index: 4;
      }
  
  #linktable.listlink { height: inherit; width: 50%; margin: 0 auto; position: relative; display: table; text-align: center;}
  
  ul {list-style-type: none; margin: 0 auto; padding: 0; overflow: hidden; background-color: rgb(27, 89, 127); height: 45px; width: 760px;}
  
  li {float: left;}
  
  li a.other { display: block; padding-top: 10px; padding-left: 14px; padding-right: 14px; margin: 0; border: 0;
   height: 45px; color: #FFF; text-decoration: none; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;
  }
  
  li a:hover { background-color: rgb(131, 139, 146);  -o-transition:.3s;
    -ms-transition:.3s;
    -moz-transition:.3s;
    -webkit-transition:.3s;
    /* ...and now for the proper property */
    transition:.3s }
  
  li a.current { background-color: rgb(238, 237, 240); color: rgb(27, 89, 127);  padding-top: 10px; padding-left: 14px; padding-right:14px; margin: 0; border: 0; display: block;  text-decoration: none;
   height: 45px; font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-weight: 500;}
  
  #namebar.topname {
      background-color: rgb(238, 237, 240);
      height: 123px;
      min-width: 760px;
      width: 100%;
      max-height: 123px;
      display: block;
      position: relative;
      border-bottom: 2px solid rgb(131, 139, 146);
      margin-top: 45px;
      text-align: center;
      padding-top: 0px;
  }
  
  img.dfrelogo { margin-top: 0px; width: 359px; height: 123px}
  
  img.firstimagehome {width: 100%; max-width: 5472px;min-width:760px; height: auto; box-shadow: 4px 4px 4px #333333; text-align: center;}
  
  #homefirstimage {margin-top: 0px; text-align: center;}</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Welcome to Dean Flint Real Estate!&lt;/title&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="stylesheet/main.css" id="main" media="screen and (min-width: 800px)" type="text/css" /&gt;
  &lt;link rel="stylesheet" href="stylesheet/mini.css" id="mini" media="screen and (max-width: 799px)"  type="text/css" /&gt;
  &lt;style type="text/css"&gt;
  #cycler{ position:relative; width: 100%; max-width: 5472px;min-width: 359px; float:left; display: table}
  #cycler img{position:absolute;z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px  #333333; float:left}
  #cycler img.active{z-index:3; width: 100%; max-width: 5472px;min-width: 359px; height: auto;text-align: center;opacity: 100; float:left}
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body id="mainbody"&gt;
  &lt;nav&gt;
  &lt;div id="topnav" class="mainnav"&gt;
  &lt;div id="linktable" class="listlink"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="index.html" class="current"&gt;HOME&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="agents.html" class="other"&gt;AGENTS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="featured.html" class="other"&gt;FEATURED LISTINGS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="current.html" class="other"&gt;CURRENT LISTINGS&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="aboutus.html" class="other"&gt;ABOUT US&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="contactus.html" class="other"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/nav&gt;
  &lt;header&gt;
  &lt;div id="namebar" class="topname"&gt;&lt;img src="images/temp/dfrelogo.jpg" class="dfrelogo" /&gt;&lt;/div&gt;
  &lt;/header&gt;
  &lt;section&gt;
  &lt;div id="cycler"&gt;
  &lt;img src="images/front_page/frontimage.jpg" /&gt;
  &lt;img src="images/front_page/frontimage2.jpg" class="active" /&gt;
  &lt;img src="images/front_page/frontimage3.jpg" /&gt;
  &lt;/div&gt;
  &lt;/section&gt;&lt;br /&gt;
  &lt;footer&gt;
  &lt;div style="position: relative;" &gt;&lt;p&gt;This text should go UNDER the above pictures&lt;/p&gt;&lt;/div&gt;
  &lt;/footer&gt;
  &lt;script type="text/javascript"&gt;
  function cycleImages(){
        var $active = $('#cycler .active');
        var $next = ($active.next().length &gt; 0) ? $active.next() : $('#cycler img:first');
        $next.css('z-index',2);//move the next image up the pile
        $active.fadeOut(1500,function(){//fade out the top image
            $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
            $next.css('z-index',3).addClass('active');//make the next image the top one
        });
      }
  
  $(document).ready(function(){
  // run every 4s
  setInterval('cycleImages()', 6000);
  })&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>