title: What are the various ways to hide a <div>?
body: <p>Right, I am a CSS noob. I am trying to collate the various ways to hide a div.</p>
  
  <p>For example:</p>
  
  <pre><code>display:none;
  visibility:hidden;
  </code></pre>
  
  <p>Are there any more esoteric ones? </p>
  
  <p>forget about JQuery, JavaScript, events...  I just to know the various CSS ways that a div with lots content and sub div can end up hidden?</p>
  
  <p>The reason why I want this is because I am looking at some code here and a div is invisible.  Why I don't know?  It might be something in the parent div.</p>
  
  <p>The div has various classes and this one looks like the offender - </p>
  
  <pre><code>.div-content {
  
      position: absolute;
      left: 70px;
      right: 0;
      top: 55px;
      bottom: 0;
  
      display: block;
  
      overflow-x: hidden;
      overflow-y: auto;
  
      padding-top: 0;
      padding-bottom: 0;
      padding-right: 0;
      padding-left: 0;
      margin: 0;
  
      /*width: 90%;*/
  
      background-image: none !important;
      background-color: #F8F7F7;
  
  }
  </code></pre>
  
  <p>I narrowed it down to this class by just commenting in and out various other classes. When this class is commented out - I can see the div.</p>