启用页脚出现在z-index控制的div下面

Question

正如我fiddle here所见，我启用两个div，其内部HTML由JS填充，基于全宽样式或媒体查询样式相互显示，但我无法设置我的两个页脚显示在彼此叠加的div之下。

要使它们显示在彼此的顶部，我使用的位置：绝对值和两个div的z-index值。

有关如何在浏览器调整大小时让我的页脚显示在div下方的任何想法

非常感谢任何帮助。

编辑：我已经更新了我的代码和fidlle ...在CSS我删除了位置：绝对;从#divcalendartabletwo开始，它允许两个页脚显示在日历下方，但是当我在iphone上以纵向模式加载页面时，这会稍微弄乱我的媒体查询..基本上我的元素不占用sciphone屏幕的全宽

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://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li>               
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li>
            <li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></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：

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

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;
}

/* 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;
}

#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: 35px;
  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: 7px;
        margin-right: 7px;
        font-size: 20px;
    }

    #monthandyearspan {
      margin-left: 7px;
      margin-right: 7px;
      font-size: 20px;
    }

    #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%;
    }
}

Answer 1

您必须从position:absolute和页脚中删除#divcalendartabletwo它将解决您的问题。

检查Fiddle.

＆＃13;

＆＃13;

var Calendar = function(o) {
        this.divId = o.ParentID;

        this.DaysOfWeek = o.DaysOfWeek;

        myLogger("this.DaysOfWeek == " + this.DaysOfWeek)

        this.Months = o.Months;

        myLogger("this.Months == " + this.Months)

        var d = new Date();

        myLogger("d == " + d)

        this.CurrentMonth = d.getMonth();

        myLogger("this.CurrentMonth == " + this.CurrentMonth);

        this.CurrentYear = d.getFullYear();

        myLogger("this.CurrentYear == "+ this.CurrentYear);

        var f=o.Format;

        myLogger("o == " + o);

        myLogger("f == " + f);


        if(typeof(f) == 'string') {
          this.f  = f.charAt(0).toUpperCase();
        } else {
          this.f = 'M';
        }

        console.log("this.f == ", this.f);
      };

      Calendar.prototype.nextMonth = function() {
        console.log("Calendar.prototype.nextMonth = function() {");

        if ( this.CurrentMonth == 11 ) {
          console.log("this.CurrentMonth == " + this.CurrentMonth);

          this.CurrentMonth = 0;

          console.log("this.CurrentMonth == " + this.CurrentMonth);

          console.log("this.CurrentYear == "+ this.CurrentYear);

          this.CurrentYear = this.CurrentYear + 1;

          console.log("this.CurrentYear == "+ this.CurrentYear);
        } else {
          console.log("this.CurrentMonth == " + this.CurrentMonth);

          this.CurrentMonth = this.CurrentMonth + 1;

          console.log("this.CurrentMonth + 1 == " + this.CurrentMonth);
        }

        this.showCurrent();
      };

      Calendar.prototype.previousMonth = function() {
        console.log("Calendar.prototype.previousMonth = function() {");

        if ( this.CurrentMonth == 0 ) {
          console.log("this.CurrentMonth == " + this.CurrentMonth);

          this.CurrentMonth = 11;

          console.log("this.CurrentMonth == " + this.CurrentMonth);

          console.log("this.CurrentYear == "+ this.CurrentYear);

          this.CurrentYear = this.CurrentYear - 1;

          console.log("this.CurrentYear == "+ this.CurrentYear);
        } else {
          console.log("this.CurrentMonth == " + this.CurrentMonth);

          this.CurrentMonth = this.CurrentMonth - 1;

          console.log("this.CurrentMonth - 1 == " + this.CurrentMonth);
        }

        this.showCurrent();
      };

      Calendar.prototype.previousYear = function() {
        console.log(" ");

        console.log("Calendar.prototype.previousYear = function() {");

        console.log("this.CurrentYear == " + this.CurrentYear);

        this.CurrentYear = this.CurrentYear - 1;

        console.log("this.CurrentYear - 1 i.e. this.CurrentYear == " + this.CurrentYear);

        this.showCurrent();
      }

      Calendar.prototype.nextYear = function() {
        console.log(" ");

        console.log("Calendar.prototype.nextYear = function() {");

        console.log("this.CurrentYear == " + this.CurrentYear);

        this.CurrentYear = this.CurrentYear + 1;

        console.log("this.CurrentYear - 1 i.e. this.CurrentYear == " + this.CurrentYear);

        this.showCurrent();
      }             

      Calendar.prototype.showCurrent = function() {
        console.log(" ");

        console.log("Calendar.prototype.showCurrent = function() {");

        console.log("this.CurrentYear == "+ this.CurrentYear);

        console.log("this.CurrentMonth == " + this.CurrentMonth);

        this.Calendar(this.CurrentYear, this.CurrentMonth);
      };

      Calendar.prototype.Calendar = function(y,m) {
        console.log(" ");

        console.log("Calendar.prototype.Calendar = function(y,m){");

        typeof(y) == 'number' ? this.CurrentYear = y : null;

        console.log("this.CurrentYear == "+ this.CurrentYear);

        typeof(y) == 'number' ? this.CurrentMonth = m : null;

        console.log("this.CurrentMonth == " + this.CurrentMonth);

        var firstDayOfCurrentMonth = new Date(y, m, 1).getDay();

        console.log("firstDayOfCurrentMonth == ", firstDayOfCurrentMonth);

        var lastDateOfCurrentMonth = new Date(y, m+1, 0).getDate();

        console.log("lastDateOfCurrentMonth == ", lastDateOfCurrentMonth);

        console.log("m == ", m);

        var lastDateOfLastMonth = m == 0 ? new Date(y-1, 11, 0).getDate() : new Date(y, m, 0).getDate();

        console.log("lastDateOfLastMonth == ", lastDateOfLastMonth);

        console.log("Print selected month and year.");

        
        var monthandyearhtml = '<span id="monthandyearspan">' + this.Months[m] + ' - ' + y + '</span>';

        console.log("monthandyearhtml == " + monthandyearhtml);

        var html = '<table>';

        var htmltwo = '<table>';

        html += '<tr>';

        htmltwo += '<tr>'; 

        console.log(" ");

        console.log("Write the header of the days of the week");

        for(var i=0; i < 7;i++) {
          console.log("i == ", i);

          console.log("this.DaysOfWeek[i] == ", this.DaysOfWeek[i]);

          html += '<th class="daysheader">' + this.DaysOfWeek[i] + '</th>';

          htmltwo += '<th class="daysheader">' + this.DaysOfWeek[i] + '</th>';
        }

        html += '</tr>';

        htmltwo += '</tr>';

        console.log("Before conditional operator this.f == ", this.f);


        var p = dm = this.f == 'M' ? 1 : firstDayOfCurrentMonth == 0 ? -5 : 2;

       
        console.log("After conditional operator");

        console.log("this.f == ", this.f);

        console.log("p == ", p);

        console.log("dm == ", dm);

        console.log("firstDayOfCurrentMonth == ", firstDayOfCurrentMonth);

        var cellvalue;

        for (var d, i=0, z0=0; z0<6; z0++) {
          html += '<tr>';

          htmltwo += '<tr>';

          console.log("Inside 1st for loop - d == " + d + " | i == " + i + " | z0 == " + z0);

          for (var z0a = 0; z0a < 7; z0a++) {
            console.log("Inside 2nd for loop");

            console.log("z0a == " + z0a);

            d = i + dm - firstDayOfCurrentMonth;

            console.log("d outside if statm == " + d);

              console.log("d < 1");

              console.log("p before p++ == " + p);

              cellvalue = lastDateOfLastMonth - firstDayOfCurrentMonth + p++;

              console.log("p after p++ == " + p);

              console.log("cellvalue == " + cellvalue);

              html += '<td id="prevmonthdates">' + 
                    		'<span id="cellvaluespan">' + (cellvalue) + '</span><br/>' +

      	        				'<ul class="cellvaluelist">' + 
      	                    	   '<li><span href="#" class="swim">SWIM - 1500m</span></li>' +

      	                    		 '<li><span href="#" class="chrono">CHRONO - 1500m</span></li>' +

      	                    	   '<li><span href="#" class="couponcode">MORE' +

      		                    	     	'<ul class="coupontooltipullist">' +

      		                    	     		'<li class="coupontooltip_li_list">' +
      	                    	     				'<img class="coupontooltipimg" src="images/tooltipswim.png">' + 
      	                    	     				'<span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span>' +
      		                    	     		'</li></br>' +

      		                    	     		'<li class="coupontooltip_li_list">' +
      	                    	     				'<img class="coupontooltipimg" src="images/tooltipswim.png">' + 
      	                    	     				'<span class="coupontooltiplistspan">Distance: 200m</br>Duration: 00:01:30</br>Laps: 4</span>' +
      		                    	     		'</li></br>' +				                    	     		

      		                    	     	'</ul>' +
      		                    	      '</span>' + 
      		                    	 '</li>' +
      	                '</ul>' +
                       '</td>';

              htmltwo += '<td id="prevmonthdates">' + 
                        '<span id="cellvaluespan">' + (cellvalue) + '</span><br/>' +

                        '<ul class="cellvaluelist">' + 
                                 '<li><span href="#" class="swim">SW</span></li>' +

                                 '<li><span href="#" class="chrono">CH</span></li>' +

                                 '<li><span href="#" class="couponcode">M' +

                                      '<ul class="coupontooltipullist">' +                                  

                                      '</ul>' +

                                      '</span>' + 
                                 '</li>' +
                        '</ul>' +
                       '</td>';

            } else if ( d > lastDateOfCurrentMonth){
              console.log("d > lastDateOfCurrentMonth");

              console.log("p before p++ == " + p);

              html += '<td id="nextmonthdates">' + (p++) + '</td>';

              htmltwo += '<td id="nextmonthdates">' + (p++) + '</td>';

              console.log("p after p++ == " + p);

            } else {
              html += '<td id="currentmonthdates">' + (d) + '</td>';
              
              htmltwo += '<td id="currentmonthdates">' + (d) + '</td>';

              console.log("d inside else { == " + d);

              p = 1;

              console.log("p inside } else { == " + p);
            }
            
            if (i % 7 == 6 && d >= lastDateOfCurrentMonth) {
              console.log("INSIDE if (i % 7 == 6 && d >= lastDateOfCurrentMonth) {");

              console.log("i == " + i);

              console.log("d == " + d);

              console.log("z0 == " + z0);

              z0 = 10; 
            }

            console.log("i before i++ == " + i);

            i++;

            console.log("i after i++ == " + i);           
          }

          html += '</tr>';

          htmltwo += '</tr>';
        }

        html += '</table>';

        htmltwo += '</table>';


        document.getElementById("monthandyear").innerHTML = monthandyearhtml;

        document.getElementById(this.divId).innerHTML = html;

        document.getElementById("divcalendartabletwo").innerHTML = htmltwo;
      };

      window.onload = function() {
        
        var c = new Calendar({
          ParentID:"divcalendartable",

          DaysOfWeek:[
          'MON',
          'TUE',
          'WED',
          'THU',
          'FRI',
          'SAT',
          'SUN'
          ],

          Months:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ],

          Format:'dd/mm/yyyy'
        });

        c.showCurrent();
        
        getId('btnPrev').onclick = function(){
          c.previousMonth();
        };

        getId('btnPrevYr').onclick = function(){
          c.previousYear();
        };

        getId('btnNext').onclick = function(){
          c.nextMonth();
        };

        getId('btnNextYr').onclick = function(){
          c.nextYear();
        };                        
      }

      function getId(id) {
        return document.getElementById(id);
      }

      function myLogger(content) {
  	    if (window.console && window.console.log) {
  	        console.log(content);
  	    }
	    }

＆＃13;

* {
	margin: 0;
	border: 0;
	padding: 0;
}

body {
	background: #F5F5F5;
	color: #363636;
	margin: 0;
	font-family: "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	line-height: 20px;	
}

h1 {
	text-align: center;
	font-size: 100%;
	line-height: 120%;
	padding: 5% 0 5% 0;
}

h2 {
	line-height: 280%;
	padding-left: 3%;
	text-decoration: underline;
}

h3 {
	line-height: 120%;
	padding: 5% 0 5% 0;
}

p {
	padding: 1%;
}

img {
	text-align: center;
	max-width: 100%;
	height: auto;
	width: auto;
}

a {
	color: #FFFFFF;
	font-weight: bold;
	font-size: 20px;	
	text-decoration: none;
}

a:hover {
	color: #FFFFFF;
	font-weight: bold;
	text-decoration: underline;	
}

header {
	background-color: #3366FF;
	width: 100%;
	height: 86px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	opacity: 0.90%;
}

#logo {
	margin: 0px;
	float: left;
	width: 200px;
	height: 86px;
	background: url("../images/logo.png") no-repeat center;
}

nav {
	float: right;
	padding: 25px 20px 20px 0;
}

#menu-icon {
	display: hidden;
	width: 100px;
	height: 86px;
	background: url(http://www.w3newbie.com/wp-content/uploads/icon.png);
	padding: 0;
	margin: 0;
}	

a:hover#menu-icon {
	border-radius: 2px 2px 0 0;
}

ul {
	list-style: none;
}

nav ul li {
	display: inline-block;
	float: left;
	padding: 10px;
}

nav ul li a:hover {
	color: #363636;
	text-decoration: none;
}

section {
	width: 29%;
	float: left;
	margin: 2% 2% 2% 2%;
	text-align: center;
}

.clear {
	clear: both;
}

#genericlinkdecoration {
	color: #3366FF;
	text-decoration: none;
	font-weight: bold;
	font-size: 14px;
}

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

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;
}

@media only screen and (max-width: 768px), screen and (min-width: 768px) and (max-width: 1024px)  {
	body {
		position: absolute;
	}

	header {
		position: absolute;
	}

	#menu-icon {
		display: inline-block;
	}	

	nav {
		padding: 0;
	}

	nav ul, nav:active ul {
		display: none;
		position: absolute;
		background: #FFFFFF;
		border: 1px solid #D6D6D6;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 2px;
	}

	nav:hover ul {
		display: block;
	}

	nav ul li a {
		color: #363636;
		text-decoration: none;
	}

	nav ul li a:hover {
		color: #3366FF;
		text-decoration: none;
	}

	nav li {
		width: 100%;
		margin: 0;
	}

	section {
		float: left;
		width: 100%;
		margin: 0;
		padding: 0;
	}   					
}

.horizontalmenubar {
	margin-top: 86px;
	background: #D6D6D6;
	height: 50px;
}

.horizontalmenubar ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.horizontalmenubar li {
	display:inline-block;
	float: left;
	margin-right: 0px;
	width: 200px;
	border-right: 2px solid #FFFFFF;
}
.horizontalmenubar li a {
	display: block;
	text-align: center;
	line-height: 50px;
	color: #000000;
	background: #D6D6D6;
	text-decoration: none;
}

.horizontalmenubar li:hover a {
	background: #F5F5F5;
	color: #3366FF;
}

.horizontalmenubar li ul {
	display: none;
}

.horizontalmenubar li ul li {
	display: block;
	float: none;
}

.horizontalmenubar li ul li a {
	padding: 0 5px 0 5px;
	line-height: 25px;	
}

.horizontalmenubar li:hover ul li a {
	background: #D6D6D6;
	color: #000000;	
}

.horizontalmenubar li ul li a:hover {
	background: #F5F5F5;
	color: #3366FF;	
}

.horizontalmenubar ul li a:hover + .hidden, .hidden:hover {
	display: block;
}

.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #000000;
	background: #D6D6D6;
	text-align: center;
	padding: 10px 0;
	display: none;
	font-weight: bold;
	font-size: 20px;
}

.horizontalmenubar input[type=checkbox]{
    display: none;
}

.horizontalmenubar input[type=checkbox]:checked ~ #menu{
    display: block;
}

@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {

	.horizontalmenubar ul {
		position: static;
		display: none;
	}

	.horizontalmenubar li {
		margin-bottom: 1px;
	}

	.horizontalmenubar ul li, li a {
		width: 100%;
	}

	.show-menu {
		display:block;
	}
}

.maindiv {
	width: 100%;
	background: #FFCC00;
}

.div_lhs_menu {
	margin: 10px 0 0 10px;
	float: left;
}

.js-css-menu {
  display: inline-block;
}

.js-css-menu, .js-css-menu ul, .js-css-menu li {
  list-style: none; 
  padding: 0; 
  margin: 0;
}

.js-css-menu a {
  text-decoration: none;
}

.js-css-menu > li {
  display: inline-block; 
  float: left;
  margin-top: 2px;
  background-color: #D6D6D6;
}

.js-css-menu > li > a {
  color: #000000; 
  display: block;
  padding: 10px 15px;
}

.js-css-menu > li:hover > a {
  background: #F5F5F5;
  color: #3366FF;
}

.js-css-menu > li div {
  position: absolute; 
  display: none;
  background: #D6D6D6;
}

.js-css-menu > li:hover div {
  display: block;
}

.js-css-menu > li div ul {
  float: none;
}

.js-css-menu > li div ul li {
  padding: 10px 15px;
  margin-bottom: 2px;
}

.js-css-menu > li div ul li:hover {
  background: #FFFFFF;
  color: #407D94; 
}

.js-css-menu.vertical > li {
  display: block; 
  float: none; 
  position: relative;
}

.js-css-menu.vertical > li div {
  width: 150px; 
  top: 0;
  left: 181px;
}

.js-css-menu.vertical > li div ul li:hover {
  background: #FFFFFF;
  color: #407D94;
}

.js-css-menu.vertical > li div ul li a {
  color: #555;
}

@media screen and (max-width : 768px), screen and (min-width: 768px) and (max-width: 1024px)  {

	
	.js-css-menu.vertical {
	  width: 100%; 
	}
}

.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;
}
#divcalendartable {
	visibility: visible;
	z-index: 2;
	position: absolute;
}

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

#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;
}

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

#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;
}

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

#cellvaluelist > li {
  list-style-type: none;
  text-align: left;
  border-bottom: 2px solid #F5F5F5;
}

#cellvaluelist > li:last-child {
  border: none;
}

#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;
}

.swim, .chrono {
    font-size: 15px;
    font-weight: normal; 
}

.swim {
  background: #626FD1;
}

.swim:hover {
  background: #F5F5F5;
  cursor: pointer;
}

.chrono {
    background: #EDCF47;
}

.chrono:hover {
  background: #F5F5F5;
  cursor: pointer;
}

.couponcode {
    background: #47ED4D;
    font-size: 15px;
    font-weight: normal;
}

.couponcode:hover {
  background: #F5F5F5;
  cursor: pointer;
}

.couponcode:hover .coupontooltipullist {
    display: block;
}

.coupontooltipullist {
    display: none;
    position: absolute;
    z-index: 1000;
    padding: 5px;
}

.coupontooltipullist, .coupontooltip_li_list {
    list-style-type: none;
    float: left;
    margin: 0;
    padding: 0;
    cursor: pointer;    
}

.coupontooltip_li_list {
    background: #D6D6D6;
    border-bottom: 2px solid #F5F5F5;
    padding: 10px;
 }

.coupontooltipimg {
    width: 55px;
    height: 48px;
    float: left;
    padding-right: 5px;    
}

.coupontooltiplistspan {
  float: right;
}

@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;
	}	   
}

＆＃13;

<header>
		<a href="#" id="logo"></a>

		<nav>
			<a href="#" id="menu-icon"></a>

			<ul>
				<li><a href="#containerjoin">My Profile</a></li> 
				<li><a href="#containerjoin">Log Out</a></li> 
				<li><a href="#">Help and FAQs</a></li>
				<li><a href="#contactus">Contact Us</a></li>
			</ul>				
		</nav>				
	</header>

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

	<div class="horizontalmenubar">

		<label for="show-menu" class="show-menu">MAIN MENU</label>
		
		<input type="checkbox" id="show-menu" role="button">

		<ul id="menu"> 

			<li><a href="#">Dashboard</a>
				
			</li>
		
			<li>
				<a href="#">H MENU OPTION</a>
				
			</li>

			<li>
				<a href="#">H MENU OPTION</a>
				
			</li>

			<li><a href="#">H MENU OPTION</a></li>

			<li><a href="#">H MENU OPTION</a></li>
		</ul>
	</div>

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

	<div class="maindiv">
	    <div class="div_lhs_menu">

		    <ul class="js-css-menu responsive vertical">
		      <li><a href="#overalldivcalendartable">Calendar</a>
		     </li>
		      
		      <li><a href="#">Dboard option 2</a>
		      </li>

		      <li><a href="#">Dboard option 3</a>
		      	
		      </li>
		    </ul>

	    </div>

		<div class="overalldivcalendartable">


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

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

  			     <div id="monthandyear"></div>


  		       <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 ..  <br>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://www.w3newbie.com/wp-content/uploads/facebook.png"/></a></li>				
				<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/twitter1.png"/></a></li>
				<li><a href="#"><img src="http://www.w3newbie.com/wp-content/uploads/youtube.png"/></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 .. 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>

＆＃13;

＆＃13;

＆＃13;