How to make <div> resizeable?

The best method would be to use CSS3. It supported by at least Webkit and Gecko.

According to the w3c spec:

div.my_class {
    resize:both;
    overflow:auto; /* something other than visible */
}

Webkit and Firefox do not interpret the specs the same way. In Webkit the size is limited to the width and height set. There's another question: How can I use CSS to make an element resizable to a dimension smaller than the initial one? concerning this.

The problem with the CSS3-only method is that only the bottom-right-hand corner of the div becomes draggable. Users will almost surely want to resize the div from any of the borders, not just the bottom-right-hand corner.

After wasting a bunch of time trying to accomplish this via copying code-snippets from Stack Overflow, I would highly recommend just using the excellent InteractJS JavaScript library in your project. It allows to you easily create a resizable (and draggable) div that can be resized from all sides.