Master page contains 2 columns: Left column is JQuery UI accordion whose width can

Question

0

Editorial Team

Asked: May 26, 20262026-05-26T20:03:09+00:00 2026-05-26T20:03:09+00:00

Master page contains 2 columns: Left column is JQuery UI accordion whose width can

0

Master page contains 2 columns:

Left column is JQuery UI accordion whose width can be changed using JQuery UI resizable.
Right column (main div) should occupy the remaining horizontal area in the screen.

This is implemented using width styles below. If accordion width is increased using mouse, right content (main div) wraps to next line.

How to force main div to appear right to accordion div after resize?
How to remove width=81% and force main div to use remaining space always?

<script type="text/javascript">
    $( "#accordion" ).resizable({       });
</script>

<body>
    <div id="container">
        <div id="accordion" style="margin: 0; clear: left; float: left; width: 17%">
            <% Html.RenderPartial("MainMenu"); %>
        </div>

        <div id="main" style="float: left; width: 81%">
            this is main content
        </div>
    </div>
</body>