Prevent right div from dropping below when the left one is expanded

2018-07-01 17:36:59

I have two divs that I want to have side by side. The left div is expandable with the help of jquery-ui resizable function. When I expand the left div after some point the right one drops below. But I would expect the horizontal scroll bar to appear instead. What do I have to do to avoid this? Here's the HTML,CSS and the script that helps to expand the left div.

HTML:

<div class="left">
    <h2>Left DIV</h2>
</div>
<div class="right">
        <h2>Right DIV</h2>
</div>

CSS:

div.left { float: left; width: 100px;
height: 680px; border-right: 5px solid #e7e8e1; white-space: nowrap; z-index: -1; background-color:green; }

div.right{ float: left; padding-left: 5px; background: navy; width:300px; }

Javascript:

$(document).ready(function () {
    $('div.left').resizable({
       handles: "e", minWidth: 100, maxWidth: 270});}
);

Here's the jsfiddle

链接地址: http://www.djcxy.com/p/88482.html

上一篇: 父级填充的CSS子级高度为100％

下一篇: 当左侧展开时，防止右侧div下降