On the master page, you will find 2 columns:
- The left column is a JQuery UI accordion that can be resized using JQuery UI resizable.
- The right column (main div) should take up the remaining horizontal space on the screen.
To achieve this layout, the following width styles are used. However, when the accordion width is increased by dragging the mouse, the content in the main div wraps to the next line.
How can we ensure that the main div always appears to the right of the accordion after resizing? And how do we remove the fixed width of 81% to make sure the main div utilizes the remaining space at all times?
<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>