title: prevent a div content go over other div
body: <p>I have built an html layout with css and divs. I have divs called top (which is the header), left (where the links are for the page) and center (for the displaying images). </p>
  
  <p>When I click on a link to display images on left, I might get images that are bigger than the browser window, where I need to scroll. I can scrool but images goes over the top section where my header is not seen. what I would like to do is, top section always on the browser window. When I scroll the images in center, if they go above the my top div, I like to hide sections that are crossing the top div. Is there a way to do this in css?</p>
  
  <pre><code>#top {
  height: 300px;
  width: 100%;
  position: fixed;
  }
  
  #left {
  
  
      padding:0;
      border: 0;
      width: 350px;
      overflow: scroll;
      float: left;
      position: fixed;
      top: 5px; 
      bottom:0px;
      min-height:950px;
  
  }
  
  #center1 {
  margin-left:352px;
  padding:0;
  border: 0;
  float: left;
  position:static;
  overflow: hidden;
  display: block;
  }
  </code></pre>