CSS Layout How to - Fix left column and scroll right column

Question

We would like to know how to fix left column and scroll right column.

Answer


<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
body {<!-- www  .  j a  v a2  s.  c  om-->
  padding-left: 230px;
}

#left {
  position: fixed;
  height: 100%;
  left: 0px;
  top: 0px;
  width: 200px;
  background-color: rgb(150, 150, 150);
  border-right: 5px solid rgb(50, 50, 50);
  padding: 10px;
}

#right {
  width: 100%;
  height: 10000px;
}
</style>
</head>
<body>
  <div id="left">Fixed-width left</div>
  <div id="right">Dynamic right. Scroll me!</div>
</body>
</html>

The code above is rendered as follows: