title: Hide inline div using CSS
body: <p>I have an inline <code>div</code> which I need to make hidden by default and then use jQuery's <code>show()</code> and <code>hide()</code> functions on it.</p>
  
  <p>I tried this, but it doesn't work:</p>
  
  <pre><code>div.mydiv { display: inline none; }
  </code></pre>
  
  <p>If I remove <code>none</code> and just use jQuery's <code>hide()</code> function, it works. But this way the elements are not hidden until the page is loaded and JavaScript code is executed.</p>
  
  <p><strong>Edit</strong>
  I have other block elements inside the <code>div</code>, so I can't use <code>span</code>.</p>