how to set right pane's content padding when using horizontal splitter?

[Nick Wu]

My css is below:

html, body

{

    height: 100%;

    margin: 0;

    padding: 0;

    font-size: 13px;

}

html

{

    overflow: hidden;

}

My layout is below:

<div id="splitter1" style="height: 100%; border: 0">

    <div id="top_pane"></div>

    <div id="middle_pane">

        <div id="splitter2" style="height: 100%; width: 100%;">

            <div id="nav_pane" style="padding: 5px">    //padding works well

                <div  id="nav" style="border:1px solid red;"> </div>

            </div>

            <div id="content_pane"  style="padding:5px">  //padding right works not well !!! why?

                <div id="content" style="border:1px solid red;"></div>

            </div>

        </div>

    </div>

    <div id="bottom_pane"></div>

</div>

my script is below:

$(document).ready(

    function () {

        var splitter1 = $("#splitter1").kendoSplitter({

            orientation: "vertical",

            panes: [{ size: "30px", resizable: false }, {}, { size: "20px", resizable: false}]

        }).data("kendoSplitter");

 

        var splitter2 = $("#splitter2").kendoSplitter({

            orientation: "horizontal",

            panes: [{ collapsible: true, size: "200px" }, {}]

        }).data("kendoSplitter");     

 

        var triggerResize = function () {

            splitter1.trigger("resize");

            splitter2.trigger("resize");

        }

 

        $(window).resize(triggerResize);

    }

);