title: HTML "Input" button stops working when inserted in a <div> tag
body: <p>I'm trying to make my site mobile friendly by creating a collapsible menu when a device that is 480px or smaller is used. I found a great demo and it works perfectly: <a href="http://medialoot.com/blog/how-to-create-a-responsive-navigation-menu-using-only-css/" rel="nofollow">How To Create A Responsive Navigation Menu Using Only CSS</a>
  I want to customize the menu and put it in a Header div tag. You can go to the link above to see the full code for this. It DOES work, however, if I insert the HTML code into a div tag, it stops working! I can put the entire amount of code into a div tag, but that defeats the purpose of using straight HTML and CSS ONLY to create this collapsible menu!</p>
  
  <p>I want to set this up as a two-column website when it is viewed on a laptop or PC with the menu on the left. I have that working just fine, but as soon as I change the menu to use the collapsible menu inside the header div, it stops working! </p>
  
  <p>So my code is as follows:</p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;div class="topcenter"&gt;
      &lt;p&gt;Consultants and Suppliers of &lt;br /&gt;Affordable, Natural, Quality,
      &lt;br /&gt;Sustainable Power Solutions!&lt;/p&gt;
  &lt;/div&gt;
  &lt;label for="show-menu" class="show-menu"&gt;Show Menu&lt;/label&gt;
  &lt;input type="checkbox" id="show-menu" role="button"&gt;
  &lt;/div&gt;
  
  &lt;div class="wrapper"&gt;
  &lt;div id="left"&gt;
      &lt;ul id="menu"&gt;
          &lt;li&gt;&lt;a href="#" title="Power" &gt;Power Up Belize&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Services&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Experience&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;About Us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS is almost exactly the same as in the example - I've proven that it works when the label and input box are NOT inside the header div tag, but it ALSO breaks as soon as I put the menu HTML inside the wrapper div! What gives? How come I can't get the input box to work correctly inside a div tag?</p>
  
  <p>Any help on this would be greatly appreciated! Thanks in advance! </p>
  
  <p>Here is my updated code (and it still doesn't work :-( ) </p>
  
  <pre><code>    @media screen and (max-width : 480px)
  {
      /*Change Header imge and font size for Mobile */
      #header
      {
          position: relative;
          top: .25em;
          text-align: center;
          font-size: 90%;
          font-weight: Bold;
          padding-bottom: 2.5em;
          background-image: url('../images/PUBLogoSm.png');
          background-repeat: no-repeat;
          background-position: center top;
          width: 100%;
          height: 130px;
          display: inline-block;
      }
      .topcenter
      {
          position: relative;
          top: 6em;
          text-align: center;
          color: #017f02;
          width: 99%;
          font-weight: bold;
          text-decoration: none;
          padding-bottom:1em;
      }
  
      /*Make dropdown links appear inline*/
      ul {
          position: static;
          display: none;
          }
      /*Create vertical spacing*/
      li {
          margin-bottom: 1px;
          }
      /*Make all menu links full width*/
      ul li, li a {
          width: 100%;
          }
      /*Display 'show menu' link*/
      #show-menu, #menu {
          display: none;
          }
      #show-menu:checked ~ #menu {
          display: block;
      }
  }
  
  
      &lt;div id="header"&gt;
      &lt;div class="topcenter"&gt;
          &lt;p&gt;Consultants and Suppliers of &lt;br /&gt;
           Affordable, Natural, Quality,&lt;br /&gt;Sustainable Power Solutions!&lt;/p&gt;
      &lt;/div&gt;
      &lt;label for="show-menu" class="show-menu"&gt;Show Menu&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class="wrapper"&gt;
          &lt;div id="left"&gt;
              &lt;ul id="menu"&gt;
                  &lt;li&gt;&lt;a href="#" title="Power" &gt;Power Up Belize&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Services&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Experience&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href=""&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>