Hello Hugo,
Please, find below an example which shows how to format panels to achieve needed separation.
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxsplitter.js"></script>
<script type="text/javascript" src="../../scripts/demos.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#mainSplitter').jqxSplitter({ width: 650, height: 450, orientation: 'horizontal', panels: [{ size: 300, collapsible: false }] });
$('#top').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: 300, collapsible: false }] });
$('#second').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: 150 }] });
$('#third').jqxSplitter({ width: '100%', height: '100%', orientation: 'vertical', panels: [{ size: 150 }] });
});
</script>
</head>
<body class='default'>
<div id="mainSplitter">
<div>
<div id="top">
<div>
<div id="second">
<div>
<span>Panel 1</span>
</div>
<div>
<span>Panel 2</span>
</div>
</div>
</div>
<div>
<div id="third">
<div>
<span>Panel 3</span>
</div>
<div>
<span>Panel 4</span>
</div>
</div>
</div>
</div>
</div>
<div>
Bottom
</div>
</div>
</body>
</html>
Best Regards,
Nadezhda
jQWidgets team
http://www.jqwidgets.com/
