Frame with adjustable width and height using mouse cursor

Question

I'm not sure where to ask this, so I've included the html, web, and css categories (I think it's css though I could be barking up the wrong tree). Basically I'm trying to create an html page with a header that never changes (non adjustable) but the content area consists of a left frame (or div perhaps?) that has search options and the right area is also divided into two rows to display the search results. Is CSS the way to go for what I'm trying to create? I've attached an image as reference.

http://imgur.com/If6RC3T

If CSS is the right way to go, can someone guide me on how I should start this?

Answer 1

There is a framework called jqlayout, Example http://layout.jquery-dev.net/demos/simple.html

You can play around with this.

Plugin page http://layout.jquery-dev.net/demos.cfm

Answer 2

I'm afraid that the dragging feature is impossible to achieve with plain .css you need some jquery involve. My question is, why do you need these areas to be draggable? I'm asking because maybe there is a different solution and you are stuck on this one.