jQuery UI + column layout

cwinters

First, thanks for this excellent (and excellently documented!) project. I'm in the process of rebuilding the front end of an existing app with jQuery + jQuery UI and the presence of DataTables continues to support my faith in open source.

I have a standard (I think) two-column layout using DIVs + CSS -- the left-hand side is contextual information, the right-hand side is the main content. I am also using a standard jQuery UI theme and the DataTables support for it.

I find that the table on the right-hand side winds up being positioned below the lowest component on the left-hand side. Here's an example screenshot with the default left-hand content:

http://cwinters.com/examples/20101122/datatable_below_accordion.png

and here's one where one of the elements in the jQuery UI according on the left-hand side is expanded:

http://cwinters.com/examples/20101122/datatable_below_expanded_accordion.png

The call to setup the data table looks like this:

[code]
$('#activityTable').dataTable({
bJQueryUI : true,
aaData : Vhs.map( data, Page.toArray ),
bAutoWidth : false,
aoColumns : [ {
sWidth : '10%',
bUseRendered : false,
fnRender : function( o ) {
return Page.dateFormatter( o.aData[0] );
}
}, {
sWidth : '20%'
}, {
sWidth : '50%'
}, {
swidth : '20%',
fnRender : function( o ) {
var actor = o.aData[3];
return actor.id
? '

cwinters

Follow up: one of my colleagues did a better job of experimenting and found the way I'd setup the two-column layout was the culprit. I'd previously been using this HTML + CSS

[code]







#wrap {
width: 100%;
}

#leftSide {
float: left;
width: 240px;
}

#rightSide {
margin-left: 250px;
}
[/code]

But changing the CSS to the following did the trick:

[code]
#leftSide {
float: left;
width: 20%;
}

#rightSide {
float: left;
width: 80%;
}
[/code]

I hope to have a more germane question next time.

Chris