How can I make a div resizable

I have a div that I would like to be able to resize from the top of it and increase/decrease its height. I have found a ton of ways on the internet that people are using to do this, but for some reason, nothing works for mine. I can get the double headed arrow to show up, but no part of my div or it's children will move. Here are some things I have tried:

$('#header').mousedown(function(){
    $('#container').resizable({
        handles: 'n, s'     
    });         
});

I have also used this:

$container-results.resizable({ handles: 'n, e, s, w, ne, se, sw, nw' });

and this

$("#container").resizable({ handles: 'n' });
var handles = $("#container").resizable("option", "handles");
$("#container").resizable("option", "handles", 'n')

and in CSS I tried

resize: vertical

and a couple of other ways, but nothing will make it resize! Help would be appreciated.

here is a simple jsfiddle example: http://jsfiddle.net/TCHdevlp/zpD2R/

I found jsfiddles that both have resizable containers at the bottom of the page as well.

http://jsfiddle.net/J4bJ3/1/

http://jsfiddle.net/Zns4Q/

this may help explain what I am looking for.

Solution

I ended up not being able to have a dynamic resizing and chose to resize to full screen, mid screen, and minimize. See the following code:

JAVASCRIPT

//attach hide show functionality to results
        $search_results.click(function() {
                if($('#hide-info').children().first().hasClass('icon-resize-full')){
                    $('#hide-info').children().first().removeClass('icon-resize-full').addClass('icon-resize-small');
                    $('#hide-info').attr('title', 'Hide train info');
                    $('#search-results-container').attr('style', 'bottom: 330px');
                    $('#table-container').height('330px');
                }
                $(this).toggleClass('visible');
                adjustSections();
                setTaskListHeight();

        });




function showInfo(){
            if($('#views').hasClass('minimized')){
                $("#hide-info").show();
                $("#views").removeClass("minimized").addClass("visible");
                $('#search-results-container').attr('style', 'bottom: 30px');
                infoState = 'vis';
            }
            else if($('#views').hasClass('visible')){
                $("#show-info").hide();
                findRule('#views.visible').style.height='100%';
                $('#table-container').css('height','100%');
                $('#train-tab-content').css('height',
                        $('#table-container').height()-$('#train-tab-content').offset().top
                );
                $('#summary-tab-container').css('height',
                        $('#table-container').height()-$('#train-tab-content').offset().top
                );
                $('#search-results-container').attr('style', 'bottom: 30px');
            }
            adjustSections();
            google.maps.event.trigger(map, 'resize');
            schedule.resizeTable();
        }

        function hideInfo(){
            if(findRule('#views.visible').style.height == '330px'){
                $("#hide-info").hide();
                $("#show-info").show();
                $("#views").attr("class", "").addClass("minimized");
                findRule('#views.visible').style.height='';
                $('#search-results-container').attr('style', 'bottom: 330px');
            }else{
                $("#show-info").show();
                findRule('#views.visible').style.height='330px';
                $('#table-container').css('height');
                $('#tab-content').css('height','220px');
                $('#summary-tab-container').css('height','220px');
            }
            setTaskListHeight();
            adjustSections();
            google.maps.event.trigger(map, 'resize');
            schedule.resizeTable();
        }