jQuery UI layout on a container div instead of body

Question

I'm using jQuery UI layout. I want to apply the layout to a container, not the entire body.

Works when I do $('body').layout();.

http://jsfiddle.net/JPEaa/216/

Fails when I add a container div and do $('.myDiv').layout();.

http://jsfiddle.net/JPEaa/217/

Am I selecting or applying my container incorrectly?

Answer 1

You container needs to have an explicit size set. If you add height to your .myDiv it works:

<div class="myDiv" style="height:400px">

http://jsfiddle.net/JPEaa/223/

Answer 2

I also wrap my layout with a div element, such as:

<div class='wrapper'>
   // layout divs go here
</div>

Except that I found it more practical to use the following CSS instead of a fixed height (as Andy has suggested) in order to allow for my layout to properly use the entire browser window and also correctly self adjust as the window was resized.

.wrapper {
   position : absolute;
   width    : 100%;
   margin   : 0 auto;
   top      : 0px;
   bottom   : 0px;
}

Note that due to the position: absolute, this may not be viable for everyone.