Setting a scroll in a div so that a table will not go outside vertical limits - table height bigger than div

Question

I've searched around a bit, and haven't really found the answer I'm looking for.

I have a table, inside a div of fixed height.

The table is added to dynamically via Javascript, so each row is added based on user input and a button click event.

The table width and cell widths are all set and fine, and the adding of information works, but when I get too many rows, the table just continues building right out of the div area defined around it.

How to I make the div area scrollable so that as the table grows the user can scroll in that div area to see the other fields added to the table?

Below is my code for the CSS, Javascript, html.

As always any help is greatly appreciated.

-----------------------CSS ---------------------------------

#notesEntered {
    float:left;
    border: 1px solid #bbbbbb;
    height:300px;
    width:850px;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
}

.noteEntryField {
    position:relative;
    top:20px;
    }

.noteEntryButton {
    position:relative;
    top:20px;
    height:27px;
    outline:none;
    text-align:center;
    background: #66ff33;
    background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#669933));
    background: -moz-linear-gradient(top,  #66cc33,  #669933);
    font-size:14px;
    border-radius:4px;
    color:#606060;
    text-shadow:2px 2px 2px #f0f0f0;
    }

.noteTable {
    max-height:300px;
    border:1px solid #cccccc;
    border-collapse:collapse;
    width:850px;
    }

.inLnBlk {
    display:inline-block;
    }

.noteHeaderCells {
    border:1px solid #dddddd;
    background-color:#1111ff;
    color:#ffffff;
    }

.cellDateEntered {
    width:200px;
    }

.cellEnteredBy {
    width:175px;
    }

.cellNoteEntered {
    width:475px;
    }

.noteBodyCells {
    border:1px solid #dddddd;
}

------------------- JS ----------------------

function addNoteRow()
    {
        event.preventDefault();
        console.log("Made it to note entry.");
        var noteTxt = $('#noteEntry').val();
        var noteEntBy = 'BGM';
        var nowNote = Date();
        var noteEntDate = dateFormat(nowNote, "mm/dd/yyyy HH:MM:ss");
        if (!document.getElementsByTagName) return;
        tabBody=document.getElementsByTagName("TBODY").item(0);
        row=document.createElement("TR");
        cell1=document.createElement("TD");
        cell2=document.createElement("TD");
        cell3=document.createElement("TD");
        textnode1=document.createTextNode(noteEntDate);
        textnode2=document.createTextNode(noteEntBy);
        textnode3=document.createTextNode(noteTxt);
        cell1.appendChild(textnode1);
        cell2.appendChild(textnode2);
        cell3.appendChild(textnode3);
        row.appendChild(cell1);
        row.appendChild(cell2);
        row.appendChild(cell3);
        tabBody.appendChild(row);
        document.getElementById("noteEntry").value = '';
        document.getElementById("noteEntry").focus();
       }

--------------------HTML-----------------------

<div id="Notes" class='acceptEnterNotes'>
            <form>
            <input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="115" />
            <button type="submit" onclick="addNoteRow()" class="noteEntryButton buttonAddNote" id="sendNoteToDispatch" value="Submit">Submit Note</button>
            </form>
            <br /><br />
            <div id="notesEntered">
            <table id="notesEnteredGrid" class="noteTable">
                <tbody class="inLnBlk">
                <tr class="enteredNotesHeader">
                    <td class="noteHeaderCells cellDateEntered">Date Entered</td><td class="noteHeaderCells cellEnteredBy">Entered by</td><td class="noteHeaderCells cellNoteEntered">Note</td>
                </tr>
                </tbody>
            </table>

            </div>

        </div>

Answer 1

Add to your div container this css rule: overflow-y: scroll