I have a fixed div with dynamic loaded li elements. Now I want the div-content to scroll when there are more than 9 li elements and a scroll-bar:

This is what it looks like:

enter image description here

At the moment the fixed div goes on over the footer and the content can not be scrolled.

Here is the css for all divs:

#fixed-div {
    position: fixed;
    width: 30%;
    margin-top:290px;
    padding-top:20px;
    padding-bottom: 20px; /* must be same height as the footer */
    background-color: rgba(255, 255, 255, 0.60);
    min-height: 100%;
}

#absolute-div {
  padding: 15px;
  background-color: rgba(255, 255, 255, 0.60);
  margin-bottom: 10px;
  position: relative;
  height: 200px;
}
#footer {
    position: relative;
    margin-top: -33px; /* negative value of footer height */
    height: 20px;
    line-height: 33px;
    border-bottom:20px solid #fff;
    text-align: left;
    background-color:#fff;
    padding-left:10px;
}
#map_canvas { /* background */
  clear:left;
  float: left;
  width: 100%;
  min-height: 100%;
  z-index:-1001;
 /* height: 530px;*/
  -webkit-box-shadow: 0px 0px 10px #888;
  -moz-box-shadow: 0px 0px 10px #888;
}

And here's the HTML:

<body>

                <div id="searchbox">  

                <div id="absolute-div" class="clear-block">


                        <form method="post" action="./index.php" accept-charset="UTF-8" method="post" id="clinic-finder-form" class="clear-block" class="clear-block">


                             <label for="edit-gmap-address">Standort angeben und Vorteile in der Umgebung finden: </label>
                             <input type="text" maxlength="128" name="address" id="address" size="60" value="" class="form-text" autocomplete="off" />
                <?php
css html css-position
Edit
Report