enable footer appear below z-index controlled divs

Vote count:

0

As seen in my fiddle here I'm enabling two divs whose inner HTML is populated by JS appear over each other based on either full-width styling or media query styling but I'm unable to set my two footers to appear below the divs which appear on top of each other.

To enable them appear on top of each other I'm using position: absolute and a z-index value for both divs.

Any ideas as to how I could enable my footers to appear below the divs whilst the browser is resized

Really appreciate any help.

HTML:

    <!-- JS targets this div -->
    <div class="overalldivcalendartable">

       <!-- <div id="year"></div> -->

      <div class="controlsdivcalendartable">
           <span id="btnPrevYr" title="Previous Year"><span><<</span></span>

           <span id="btnPrev" title="Previous Month"><span><</span></span>

           <!-- <input type="button" src="images/btnprevmonth.png" alt="Submit" id="btnPrev"/>-->

           <!-- <div id="month"></div> -->

             <!-- JS targets this div -->
             <div id="monthandyear"></div>

           <!--<input type="button" src="images/btnnextmonth.png" alt="Submit" id="btnNext"/>-->

           <span id="btnNext" title="Next Month"><span>></span></span>

           <span id="btnNextYr" title="Next Year"><span>>></span></span>      
        </div>

      <div class="clear"></div>

      <div id="divcalendartable"></div>

    <div id="divcalendartabletwo"></div>         

    </div>
</div>

<div class="clear"></div>

<footer id="footer">
    <section>
        <h3>ABOUT US:</h3>

        <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. qwerty .. <br></p>             
    </section>

    <section>
        <h3>LIKE, FOLLOW OR WATCH US:</h3>
        <ul class="social">
            <li><a href="#"><img src="http://ift.tt/1xWezZE"/></a></li>               
            <li><a href="#"><img src="http://ift.tt/1BG8XD1"/></a></li>
            <li><a href="#"><img src="http://ift.tt/1xWeCoi"/></a></li>                    
        </ul>
    </section>

    <section id="contactus">
        <h3>CONTACT US:</h3>

        <p>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br><br><b>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</b><br><br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..<br>qwerty .. qwerty .. qwerty .. qwerty .. qwerty ..</p>             
    </section>
</footer>

<footer class="footerTwo">
    <p> Copyright &copy; 2015 | qwerty Ltd | All rights reserved.</p>
</footer>

CSS:

/* Generic table styling */
.overalldivcalendartable {
    margin: 12px 0 12px 10px;
    float: left;
}

.controlsdivcalendartable {
    background: #FFCC00;
    float: left;
}

table { 
  border-collapse: collapse; 
}

th { 
  background: #333; 
  color: white; 
  font-size: 20px;
  font-weight: bold; 
  padding: 6px;
  vertical-align: top;
}

td { 
  padding: 6px; 
  border: 1px solid #ccc;
  vertical-align: top;
  width: 125px;
  height: 100px;
  font-size: 20px;
}

/* Disable div to be used for media query calendar */
#divcalendartable {
    visibility: visible;
    z-index: 2;
    position: absolute;
}

#divcalendartabletwo {
    visibility: hidden;
    z-index: 1;
    position: absolute;
}

#divcalendartable, #divcalendartabletwo {
    margin-top: 10px;
}

#btnPrevYr, #btnPrev, #monthandyear, #btnNext, #btnNextYr {
    font-size: 35px;
    font-weight: bold;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    float: left;
    margin-left: 20px;
    margin-right: 20px;
    /*background: #00FFCC;*/      
}

#monthandyearspan {
  font-size: 25px;
  font-weight: bold;
  margin-left: 20px;
  margin-right: 20px;
  vertical-align: middle;
  /*background: #00FFCC;*/
}   

#monthandyear {
  vertical-align: middle;
  float: left;
}

.daysheader {
  background: #C0C0C0;
  height: auto;
  text-align: center;
}

#prevmonthdates, #nextmonthdates {
  font-size: 20px;
  font-weight: bold;
  background-color: #E0E0E0;
  width: 130px;
  height: 100px;
}

#prevmonthdates, #nextmonthdates {
  background-color: #E0E0E0;
}

#currentmonthdates {
  background-color: #FFFFFF;
  font-size: 20px;
  font-weight: bold;
  width: 130px;
  height: 100px;
}

/*Apply styling UL cellvaluelist*/
#cellvaluelist {
  font-family:'Trebuchet MS', Tahoma, Sans-serif;
  font-size: 20px;  
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/*Apply styling on all LI items in the UL cellvaluelist*/
#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
}

/*Eliminate border on last list item*/
#cellvaluelist > li:last-child {
  border: none;
}

/*Styling for the span in the main list*/
#cellvaluelist > li span {
  text-decoration: none;
  color: #000;
  display: block;
  width: 150px;

  -webkit-transition: font-size 0.3s ease, background-color 0.3s ease;
  -moz-transition: font-size 0.3s ease, background-color 0.3s ease;
  -o-transition: font-size 0.3s ease, background-color 0.3s ease;
  -ms-transition: font-size 0.3s ease, background-color 0.3s ease;
  transition: font-size 0.3s ease, background-color 0.3s ease;
}

/*Shared styling for swim and chrono*/
.swim, .chrono {
    font-size: 15px;
    font-weight: normal; 
}

/*Styling for the list items in the table cells*/
.swim {
  background: #626FD1;
}

/*Hover on the 1st LI item on the list in the table cell*/
.swim:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.chrono {
    background: #EDCF47;
}

/*Hover on the 2nd LI item on the list in the table cell*/
.chrono:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Styling for the list items in the table cells*/
.couponcode {
    background: #47ED4D;
    font-size: 15px;
    font-weight: normal;
}

/*Hover on the last LI item on the list in the table cell*/
.couponcode:hover {
  background: #F5F5F5;
  cursor: pointer;
}

/*Apply the hover on the UL coupontooltipullist*/
.couponcode:hover .coupontooltipullist {
    display: block;
}

/*UL in the tooltip*/
.coupontooltipullist {
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 5px;
}

/*Shared UL and LI list properties in the tooltip*/
.coupontooltipullist, .coupontooltip_li_list {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    cursor: pointer;    
}

/*LI in the tooltip*/
.coupontooltip_li_list {
    background: #D6D6D6;
    border-bottom: 2px solid #F5F5F5;
    padding: 10px;
 }

/*IMG in the LI in the tooltip*/
.coupontooltipimg {
    width: 55px;
    height: 48px;
    float: left;
    padding-right: 5px;    
}

/*Span in the LI in the tooltip*/
.coupontooltiplistspan {
  float: right;
}

/*Responsive Styles - div_lhs_menu and table */
@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {

    .div_lhs_menu {
        margin-left: 0;
        width: 100%;
    }

    .overalldivcalendartable {
       clear: both;
       margin-top: 10px;
       margin-left: 0px;
    }

    #divcalendartable {
        visibility: hidden;
    }

    #divcalendartabletwo {
        visibility: visible;
    }

    #btnPrevYr, #btnPrev, #monthandyear, #btnNext, #btnNextYr {
        margin-left: 5px;
        margin-right: 5px;
    }

    #monthandyearspan {
      margin-left: 10px;
      margin-right: 10px;
    }

    #prevmonthdates, #currentmonthdates, #nextmonthdates {
      width: 50px;
      height: 50px;
      font-size: 20px;
    }      
}

@media screen and (max-width : 1024px) {
    .overalldivcalendartable {
        width: 100%;
    }
}

@media screen and (max-width : 1185px) {
    .overalldivcalendartable {
        width: 75%;
    }
}


footer {
    background-color: #808080;
    width: 100%;
    overflow: hidden;
    position: absolute;
}

footer p, footer h3 {
    color: #FFFFFF;
}

footer p a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: normal;
    font-size: 14px;
}

ul.social li {
    display: inline;
}

ul.social img {
    height: 50px;
}

footer.footerTwo {
    border-top: 1px solid #4D4350;
    background-color: #3366FF;
    text-align: center;
}

asked 21 secs ago

ANM

21

enable footer appear below z-index controlled divs