using openlayers with jquery

I want to use jquery with openlayers for rich interface. I have used layout-master for simple layout. But the problem is, when I add simple map using openlayers 'map' will not display at the center. .

.ui-layout-toggler-west, .ui-layout-toggler-south { border: 0; } .ui-layout-toggler-west div { width: 8px; height: 35px; } .ui-layout-toggler-south div { width: 35px; height: 8px; float: left; } function init() { var options = { projection: new OpenLayers.Projection("EPSG:32643"), units: "m", numZoomLevels: 10, maxExtent: new OpenLayers.Bounds(401623.280957, 1282418.1261, 888858.311664, 2044579.876058) }; var map = new OpenLayers.Map("map", options) var layer = new OpenLayers.Layer.MapServer("District", "http://{myserver}/cgi-bin/mapserv.exe", { map: 'C:/ms4w/Apache/htdocs/myapp/hello2.map', }); map.addLayer(layer); map.zoomToMaxExtent(); }; function finalizeLayout() { //Layout var mainLayout = $('body').layout({ applyDefaultStyles: true }); }; $(document).ready(function() { init(); finalizeLayout(); });

It works fine if I use only html (no jquery)

html, body { width: 100%; height: 98%; margin: 1; padding: 1; }; } function init() { var options = { projection: new OpenLayers.Projection("EPSG:32643"), units: "m", numZoomLevels: 10, maxExtent: new OpenLayers.Bounds(401623.280957, 1282418.1261, 888858.311664, 2044579.876058) }; var map = new OpenLayers.Map("map", options) var layer = new OpenLayers.Layer.MapServer("district_utm", "http://{myserver}/cgi-bin/mapserv.exe", { map: 'C:/ms4w/Apache/htdocs/hello2.map', }); map.addLayer(layer); map.zoomToMaxExtent(); };