Overflow-x: hidden also hides vertical content too

The way you made the two divs (with an absolute position) void the overflow rule!

You need to change the position type (to normal/not absolute) and I suggest using floats, finally, the container div that you want to apply the overflow, needs to have a way to fit it, like placing a div at the end with clear: both (in the case of using floats).

EDIT: I just tried it and you can hide the second div by following the upper suggestion and adding another surrounding div inside with a very large width and change the overflow-x to overflow for the main container div.

Like this:

<div id="schools-container">
  <div id="schools-container-inside">
     <div id="schools-list"> One </div>
     <div id="boards-list"> Two </div>
  </div>
</div>

And then the CSS (I commented the original not used CSS and added the new div class at the end):

#schools-container {
    width: 400px; /* Set the width of the visible portion of content here */
    background-color: fuchsia;
    position: relative;
    /*overflow-x: hidden;*/
    overflow: hidden;
}
#schools-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: purple;
    /*
    position: absolute;
    top: 0;
    left: 0;
    */
    float: left;
}
#boards-list {
    width: 400px; /* Set the width of the visible portion of content here */
    height: 600px; /* Delete the height, let the content define the height */
    background-color: green;
    /*
    position: absolute;
    top: 0;
    left: 400px;
    */
    float: left;
}
#schools-container-inside {
    width: 10000px;
    overflow: hidden;
}

JsFiddle here: http://jsfiddle.net/MbMAc/