A full page layout with resizable panes using jQuery UI

Question

I\'m trying to create the overall layout of a webapp. The app is full-screen and has a fixed header and three columns/panes. The center pane consists of two rows:

Answer 1

There was a few small problems that caused the behaviour that you don't like.

These were fixed in this Fiddle

The problems were:

When resizing Left, Right is also resized (which it shouldn't)

Fixed by setting a initial width (in percent)

When resizing Left towards full width, Center content is hidden under Right

Couldn't reproduce

When resizing Right the wrapper (Fuchsia-colored) is partly visible Center bottom is resized through the top of the Center top, not through it's own top

Fixed by setting left to 0 during resize.

$(".right.pane").resizable({
    handles: "e, w",
    resize: function(event, ui) {
      ui.position.left = 0;
    }
  });

Center bottom is resized through the top of the Center top, not through it's own top

This is due to that JQuery UI Resizable uses relative positioning which do not work in table cells. Fixed by adding a content div that handles the resize.

 
   
Center top