Overflow-x: hidden also hides vertical content too

Question

I have a DIV measuring 400px wide, containing two DIVs side-by-side, each with width of 400px and height of 600px. The width of both DIVs is fixed, however the height can vary. I'd like to hide the second DIV and show the first completely, with no scrolling inside the DIV.

My solution, I thought, was to hide the overflow-x. This seems to also hide the y overflow too.

Here's my code:

#schools-sub-nav {  }  #schools-container {    width: 400px; /* Set the width of the visible portion of content here */    background-color: fuchsia;    position: relative;    overflow-x: 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;  }  #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;  }

<div id="schools-sub-nav"> <a href="#schools-list">Schools List</a> // <a href="#boards-list">Boards List</a> </div>  <div id="schools-container">      <div id="schools-list"> One </div>      <div id="boards-list"> Two </div>  </div>

I expect #schools-list to be visible, but for some reason overflow-x: hidden in #schools-container hides it.

Answer 1

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/