title: Automatic Increase in height (html, CSS)
body: <p>Sorry for the most uncreative title for this post but I don't know how to put this in words. </p>
  
  <p>I created a DIV</p>
  
  <pre><code>&lt;div class="pull-right" id="options"&gt;
      &lt;ul class="list-inline text-right" &gt;
          &lt;li&gt;&lt;button class="btn-link glyphicon glyphicon-tags"&gt;&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="btn-link glyphicon glyphicon-time"&gt;&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="btn-link glyphicon glyphicon-heart-empty"&gt;&lt;/button&gt;&lt;/li&gt;
          &lt;li&gt;&lt;button class="btn-link glyphicon glyphicon-remove text-danger"&gt;&lt;/button&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;     
  </code></pre>
  
  <p>I am using the following CSS to Hide and Show this DIV on Mouse-hover </p>
  
  <pre><code>&lt;style&gt;
      #options {
          display: none;
      }
  
      #itemcard:hover #options {
          display: block;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>It works fine but the issue is when I move my mouse to div class #itemcard it extends the high of the DIV</p>
  
  <p>I hope I am explaining it well, here are some screenshots</p>
  
  <p><a href="https://i.stack.imgur.com/dpTT2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dpTT2.png" alt="BEFORE MOUSE-HOVER"></a></p>
  
  <p><em>Before Mouse-Hover</em></p>
  
  <p>And now
  <a href="https://i.stack.imgur.com/MJ805.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MJ805.png" alt="enter image description here"></a>
  <em>After Mouse-Hover</em></p>
  
  <p>As we can see the Buttons are displaying but it created a bigger GAP (Displayed with Redlines in the screenshot). </p>
  
  <p>How can I not this happen and keep the hight consistent? I don't want to restrict the hight of the DIV as I will run it to more issue if the DIV has more data to show </p>
  
  <p>Is it possible to render DIV to the size "BEFORE" the #options was turned to display:none ?</p>
  
  <p>Cheers</p>