Let me start off by saying how much I love jQuery as a JavaScript library. It has made life so much easier, and I have been able to finish my work faster by using jQuery.

So today I found myself wishing that setting a minimum height to an element wasn’t so damned hard, and I finally realized how easy it could be. I thought I would share, since I obviously haven’t touched this site in a while.

Here’s how I did it:

First, I downloaded jQuery and the Dimensions plugin.

Then I added both scripts to my page:

      <script type="text/javascript" src="path/to/jquery.js"></script>
      <script type="text/javascript" src="path/to/dimensions.js"></script> 

Then, using the dimensions plugin, I determined the height of my element, and created an if/then statement that says if the element has a height less than 200px, give that element a height of 200px.

<script type="text/javascript">
//<![CDATA[

      $(function() {
            var contentHeight = $('div#content').height();
            if (contentHeight < 200) {
                  $('div#content').css('height','200px');

            }

      });

//]]>
</script>

It’s really that easy!