<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
The left and right panel are both floated left,they work well when no scroll bar exist,however if the height of the left panel changed,and the scroll bar will display,then the right panel will go to bottom.
See exmaple here:
At first,the right div will display beside the left,when you click the button,the right will go to bottom.
How to fix it?
update
In fact I can not set the absolute size of the left and right div,since I want them resize according the content autoly.
Fullcode:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
}
.con{
float:left;
position:relative;
left:100px;;
top:100px;
border:2px solid red;
max-height:80%;
overflow-y:auto;
}
.left{
background-color:black;
position:relative;
float:left;
}
.right{
background-color:blue;
position:relative;
float:left;
width:300px;
height:200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById("open").onclick=function(){
document.getElementById("left").style.height="900px";
//document.getElementById("right").style.width="300px";
//document.getElementById("right").style.height="500px";
}
}
</script>
</head>
<body>
<div class="con">
<div class="left" id="left">
<input type="button" value="set the height of the left panel" id="open" />
</div>
<div class="right" id="right"></div>
</div>
</body>
</html>
This works…