title: setting height of div container disables click inside div?
body: <p>This is weird. I have an input button inside of 3 divs, the outer-most of which is id'ed as "container". When I set "container"'s height, no action is triggered when I click on the inputs id'ed as "switch" and "next". However, when I do not set a height for #container, the click actions do work. What is causing this? Thank you!
  My html and css is below.</p>
  
  <p>html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv:"Content-Type" content="text/html; charset=ISO-8859-1" /&gt;
      &lt;script text="text/Javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/Javascript" src="jquery.js"&gt; &lt;/script&gt;
  
      &lt;link href='http://fonts.googleapis.com/css?family=Droid+Sans+Mono' rel='stylesheet' type='text/css'&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="jquery_home.css"&gt;
  
  
      &lt;title&gt; jquery home &lt;/title&gt;
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="container"&gt; 
  
      &lt;h1 style="position: relative; top: 10%; width: 300px; margin-left: auto; margin-right: auto"&gt; Learn jQuery &lt;/h1&gt;
  
  &lt;div id="q_and_a_container" style="text-align: center"&gt;
      &lt;div style="width: 200px; margin-left: auto; margin-right: auto; text-align: center" id="qa" height="500px"&gt; Nate&lt;/div&gt;
      &lt;input type="submit" id="switch" value="See Answer" /&gt; 
      &lt;input type="submit" id="next" value="Next Question" /&gt;
  
  
  &lt;/div&gt;
  
  &lt;div id="answer_container"&gt;
      &lt;textarea id="answer_here"&gt; &lt;/textarea&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="another_container" style="width: 300px; margin-left: auto; margin-right: auto; text-align: center"&gt;
  
      &lt;h2 style="font-family: 'Chalk'"&gt;
  &lt;a href="add_question.html"&gt;Add question &lt;/a&gt; &lt;/h2&gt;
  
  &lt;/div&gt;
  
  
  
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>@font-face {
      font-family: "Chalk";
      src: url("../../font/KGSecondChancesSketch.ttf");
  }
  
  h1 {
      font-family: "Chalk";
  }
  
  html, body {
      height: 100%;
      margin: 0;
  }
  
  #container {
      width: 100%;
      height: 50%;
  }
  
  body {
      background-image: url(../../../img/compressedbgs/chalkboard.jpg);
      background-size: 100% 100%;
      background-repeat: repeat-x;
  }
  
  
  #q_and_a_container {
      height: 50%;
      position: relative;
      float: left;
      top: 25%;
      left: 2%;
      width: 45%;
      margin: 1%;
      background-color: rgba(255, 255, 255, 0.1);
  
      -webkit-box-shadow: 0px 0px 12px rgba(0,0,0,0.4);
      -moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
      -webkit-border-radius: 12px;
      -moz-border-radius: 7px;
      border-radius: 7px;
  
      background: -webkit-gradient(linear, left top, left bottom,
          color-stop(0% white), color-stop(15%, white), 
              color-stop(100%, #D7E9F5));
      background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3);
      z-index: 45;
  }
  
  div#qa {
      position: relative;
      top: 25%;
      height: 75%;
      z-index: 50;
  }
  
  #answer_container {
      position: relative;
      float: left;
      height: 50%;
      top: 25%;
      left: 2%;
      width: 45%;
      background-color: rgba(0,0,0,0.1);
      margin: 1%;
      border: none;
      -webkit-border-radius: 12px;
      -moz-border-radius: 7px;
      border-radius: 7px;
  }
  
  input {
      width: 107px;
      margin-left: auto;
      margin-right: auto;
      background-color: rgba(255, 255, 255, 0.1);
      -webkit-border-radius: 7px;
      -moz-border-radius: 7px;
      border-radius: 7px;
      font-family: 'Droid Sans Mono';
      z-index: 1000;
  }
  
  textarea {
      color: white;
      font-family: "Droid Sans Mono";
      width: 100%;
      height: 100%;
      border: none;
      -webkit-border-radius: 12px;
      -moz-border-radius: 7px;
      border-radius: 7px;
      background-color: rgba(0,0,0,0.1);
      -moz-appearance: none;
      font-size: medium;
  }
  
  textarea:focus {
      outline: none;
      border: none;
  }
  
  #add_question {
      clear: both;
  }
  
  a {
      text-decoration: none;
  
  }
  
  a:visited {
      color: black;
  }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(document).ready(function() {
  
      var question_number = 1;
      var tempText;
      var qno;
  
  
      $(document).on("click", "#switch", function(event) {
          if ($("#switch").val() == "See Answer") {
              tempText = $("#qa").text();
              $("#qa").text("");
              qno = "" + question_number;
              qno = "#" + qno;
  
              $.ajax({
                  url: "answers.html",
                  datatype: "html",
                  success: function(data) {
                      $("#qa").html($(data).filter(qno).text());
                  },
                  error: function(r) {
                      alert("whoops, error in ajax request");
                  }
              }); // end AJAX request
  
              // change value
              $("#switch").val("See Question");
          } else {
  
              temptText = $("#qa").text();
              $("#qa").text("");
              qno = "" + question_number;
              qno = "#" + qno;
  
              $("#qa").text(tempText);            
              $("#switch").val("See Answer");
              }
      });
  
      $(document).on("click", "#next", function(event) {
          question_number = question_number + 1;
          qno = "" + question_number;
          qno = "#" + qno;
  
          $.ajax({
              url: "questions.html",
              datatype: "html",
              success: function(data) {
                  $("#qa").text($(data).filter(qno).text());
              },
              error: function(r) {
                  alert("whoops, error in ajax request for next question");
              }
          }); // end AJAX request
      });
  
      $("textarea").keydown(function(e) {
      if(e.keyCode === 9) { // tab was pressed
          // get caret position/selection
          var start = this.selectionStart;
          var end = this.selectionEnd;
  
          var $this = $(this);
          var value = $this.val();
  
          // set textarea value to: text before caret + tab + text after caret
          $this.val(value.substring(0, start)
                      + "\t"
                      + value.substring(end));
  
          // put caret at right position again (add one for the tab)
          this.selectionStart = this.selectionEnd = start + 1;
  
          // prevent the focus lose
          e.preventDefault();
      }
  });
  
  
  })
  </code></pre>