title: overflow hidden needed in container makes appear scrollbar
body: <p>I'm having a bit of trouble with overflow: hidden to give height to a container....</p>
  
  <p>So.... if you see here: <a href="https://jsfiddle.net/8xxcm7vw/1/" rel="nofollow">https://jsfiddle.net/8xxcm7vw/1/</a></p>
  
  <p>html:</p>
  
  <pre><code> &lt;body&gt;
      &lt;div class="wrapperOrg"&gt;
        &lt;div class="alignedLeft col-md-19 col-sm-20 col-xs-24"&gt;
          &lt;nav id="topNavigation" class="navbar navbar-default" role="navigation"&gt;
            &lt;div class="container-fluid"&gt;
              &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"&gt;  
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="collapse navbar-collapse" id="navbar-collapse-1"&gt;      
                &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;
                    &lt;a href=""&gt;&lt;span&gt;Manufracturer&lt;span&gt; &lt;/span&gt;Approved&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    
                    &lt;a href=""&gt;&lt;span&gt;Customer 1st&lt;span&gt; &lt;/span&gt;We'll visit you&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    
                    &lt;a href=""&gt;&lt;span&gt;Excess&lt;span&gt; &lt;/span&gt;SAFE&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;a href=""&gt;&lt;span&gt;Friendly Form- &lt;span&gt; &lt;/span&gt;Free Help&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    
                    &lt;a href=""&gt;&lt;span&gt;FREE-&lt;span&gt; &lt;/span&gt;Accident Management&lt;/span&gt;&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;     
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/div&gt;&lt;div id="socialNavigation" class="alignedRight col-md-5 col-sm-4 col-xs-18"&gt;
          &lt;ul class="nav navbar-nav"&gt;          
            &lt;li&gt;
              &lt;a href="#facebook"&gt;
                &lt;i class="icon icon-facebook"&gt;&lt;/i&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;  
              &lt;a href="#googleplus"&gt;
                &lt;i class="icon icon-twitter"&gt;&lt;/i&gt;
              &lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#twitter"&gt;
                &lt;i class="icon icon-youtube"&gt;&lt;/i&gt;
              &lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="wrapperWh"&gt;
        &lt;div class="alignedLeft static-top col-md-19 col-sm-20 col-xs-24"&gt;
          &lt;nav id="mainNavigation" class="navbar navbar-default" navbar-static-top&gt;
            &lt;div class="container-fluid"&gt;
                &lt;div class="alignedLeft col-md-7 col-sm-7 col-xs-7"&gt;
              &lt;div class="navbar-header"&gt;
                &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-2"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;/button&gt;
                &lt;div class="navbar-brand "&gt;
                  &lt;img src="images/advance_logo.png" alt=""/&gt;
                &lt;/div&gt;  
              &lt;/div&gt;
                  &lt;/div&gt;&lt;div class="alignedRight col-md-17 col-sm-17col-xs-17"&gt;
              &lt;div class="collapse navbar-collapse" id="navbar-collapse-2"&gt;      
                &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;
                    &lt;a href=""&gt;Home&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt; 
                    &lt;a href=""&gt;Accident&lt;br&gt;Management&lt;/a&gt;
                    &lt;div class="subMainNavigation"&gt;
                      &lt;div class="col-md-5 col-sm-5 col-sx-5"&gt;
                        &lt;img src="images/kitemark.png" alt=""/&gt;
                        &lt;p&gt;There are many variations of passages. There are many variations of passages of Lorem Ipsum available&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-9 col-sm-9 col-sx-9"&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href=""&gt;Download App&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href=""&gt;Accident Helpline&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-10 col-sm-10 col-sx-10"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    
                    &lt;a href=""&gt;Approved&lt;br&gt;Manufacturers&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                    &lt;a href=""&gt;Our&lt;br&gt;Services&lt;/a&gt;
                    &lt;div class="subMainNavigation"&gt;
                      &lt;div class="col-md-5 col-sm-5 col-sx-5"&gt;
                          &lt;img src="images/kitemark.png" alt=""/&gt;
                          &lt;p&gt;There are many variations of passages. There are many variations of passages of Lorem Ipsum available&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-9 col-sm-9 col-sx-9"&gt;
                        &lt;ul&gt;
                            &lt;li&gt;&lt;a href=""&gt;Structural Aluminium Repairs&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Free Manufacturer paint/body inspection&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-10 col-sm-10 col-sx-10"&gt;&lt;/div&gt; 
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    
                    &lt;a href=""&gt;About&lt;br&gt;Advance&lt;/a&gt;
                    &lt;div class="subMainNavigation"&gt;
                      &lt;div class="col-md-5 col-sm-5 col-sx-5"&gt;
                          &lt;img src="images/kitemark.png" alt=""/&gt;
                          &lt;p&gt;There are many variations of passages. There are many variations of passages of Lorem Ipsum available&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="col-md-9 col-sm-9 col-sx-9"&gt;
                        &lt;ul&gt;
                          &lt;li&gt;&lt;a href=""&gt;Commitment to Quality&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Pride and Joy&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Meet the team&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;    
                      &lt;/div&gt;
                      &lt;div class="col-md-10 col-sm-10 col-sx-10"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li&gt;    
                    &lt;a href=""&gt;Contact&lt;br&gt;Us&lt;/a&gt;
                  &lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt; 
              &lt;/div&gt; 
            &lt;/div&gt;
          &lt;/nav&gt;
        &lt;/div&gt;&lt;div id="callNavigation" class="alignedRight col-md-5 col-sm-4 col-xs-18"&gt;
          &lt;a href="phone:"&gt;
            &lt;i class="icon icon-phone"&gt;&lt;/i&gt;
            &lt;p&gt;
              &lt;span&gt;Helpline&lt;/span&gt;
              &lt;span&gt;01246 858500&lt;/span&gt;
            &lt;/p&gt;
          &lt;/a&gt;
        &lt;/div&gt; 
         &lt;div id="displaySubmenu" class="col-md-24 col-sm-24 col-xs-24"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="wrapperMain"&gt;
        &lt;div id="mainContent" class="col-md-24 col-sm-24 col-xs-24"&gt;
        &lt;div id="owl-main" class="owl-carousel"&gt;
            &lt;div&gt;
              &lt;img src="http://s23.postimg.org/9f5c5mgi3/slider1.jpg" alt=""  class="img-responsive"/&gt;          
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="floatingText"&gt;
                &lt;h3&gt;Advance Accident &lt;span&gt;MANAGEMENT&lt;/span&gt;&lt;/h3&gt;
                &lt;span&gt;'We'll take the stress away'&lt;/span&gt;
                &lt;ul&gt;
                   &lt;li&gt;&lt;/i&gt;Available all day, every day&lt;/li&gt;
                   &lt;li&gt;Free replacement vehicle&lt;/li&gt;
                   &lt;li&gt;Free Recovery, delivery a Collection, we'll come to you&lt;/li&gt;
                   &lt;li&gt;We'll liase with your insurance company&lt;/li&gt;
                   &lt;li&gt;Friendly, form-free help&lt;/li&gt;
                &lt;/ul&gt;
                &lt;a href="#" class="orangeButton downloadApp"&gt;&lt;p&gt;DOWNLOAD&lt;/p&gt;&lt;span&gt;FREE APP&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt; &lt;!-- ends wrapperMain--&gt; 
    &lt;/body&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>.navbar-collapse{
    padding:0;
    margin:0;
  }
  
      .navbar-nav {
          width:100%;
          float:none;
          /*displaying inline block makes a little margin*/
          margin-top: 0.1%;
          margin-bottom: 0.1%;
      }
      .navbar-default {
          border:none;
          margin-bottom: 0;
          border-radius:0;
          box-shadow:none;
      }
      .navbar-brand {
          padding:0;
      }
  
      /*vertical alignment*/
      .alignedLeft,
      .alignedRight{
          display: inline-block;
          vertical-align: middle;
          height:100%;
          padding:0;
          float:none;
      }
      /**Top Navigation**/
      .wrapperOrg {
           background: #f9540a;
      }
  
      #topNavigation {
         background: #f9540a;
         font-family:'Droid Sans', sans-serif;
         font-weight:700;
         font-size:1.2em;
      }
      #topNavigation li {
          border-right:2px solid #d93700;
          box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
          -webkit-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5);
         -moz-box-shadow: 1.5px -0.5px 0px -0.5px rgba(255, 255, 250, 0.5); 
      }
      #topNavigation li a {
          color: #fff;
          padding: 3%;
      }
      #topNavigation .navbar-nav li a:hover {
          color: #808080;
      }
      #topNavigation li a span {
          display:block;
      }
      /*for better responsive*/
      #topNavigation li:first-child {
          width:21%;
      }
      #topNavigation li:nth-child(2){
          width:19%;
      }
      #topNavigation li:nth-child(3){
          width:13%;
      }
      #topNavigation li:nth-child(4){
          width:20%;
      }
      #topNavigation li:last-child {
          width:27%;
          border:none;
          box-shadow: none;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
      }
  
      /**Social Navigation**/
      #socialNavigation li {
          padding:0 1%;
      }
      #socialNavigation li a {
           color: #808080;
           text-decoration:none;   
           padding:0;
      }
      #socialNavigation li a:hover {
           color: #808080;
           text-decoration:none;   
           padding:0;
           background: none;
      }
      #socialNavigation li a i{
          font-size:3.5em;
          line-height: 1.2;
          color: #808080;
          background-color: #fff;
          border-radius: 50%;
          box-shadow: 1px 0px 0px 2px #808080 inset;
      }
  
      /**Main Navigation**/
      .wrapperWh {
           background: #ffffff;
           /*relative to displayMenu*/
           position:relative;
           box-shadow: 0px 6px 5px 0px rgba(0, 0, 0, 0.75)
      }
      #mainNavigation {
          background-color: #ffffff;
          font-family:'Droid Sans', sans-serif;
          font-weight:700;
          font-size:1.2em;
          /* relative to the fullSubMainNav*/
          position:relative;
      }
      #mainNavigation .navbar-brand {
          height: auto; 
          padding:0;
      }
      #mainNavigation ul li {
          border-right:2px solid red;
          padding:0 2%;
      }
      #mainNavigation ul li a {
        color:black;
        padding:0;
      }
      /*for better responsive*/
      #mainNavigation li:first-child {
          width:12%;
      }
      #mainNavigation li:nth-child(2){
          width:20%;
      }
      #mainNavigation li:nth-child(3){
          width:22%;
      }
      #mainNavigation li:nth-child(4),
      #mainNavigation li:nth-child(5){
          width:15%;
      }
      #mainNavigation li:last-child {
          width:16%;
          border:none;
          box-shadow: none;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
      }
  
      /*full subnavigation for mainNavigation*/
      #fullSubMainNav {
          width:100%;
          /* absolute to mainNavigation*/
          border:1px solid blue;
          height:50px;
      }
      /*subnavigation for mainNavigation on hover*/
      .activeNav {
          display:block;
      }
      .subMainNavigation {
          display:none;
      }
      /*we are styling the subMainNavigation*/
      #displaySubmenu ul{
        font-family: "Droid Sans",sans-serif;
        font-weight: 400;
        font-size: 1.2em; 
      }
      #displaySubmenu ul li{
       list-style:none;
       border-bottom:2px solid #d8d8d8;
       padding: 3% 0;
      }
      #displaySubmenu ul li:last-child{
       list-style:none;
       border-bottom:none;
      }
      #displaySubmenu ul li:before{
          content:"\25CF";
          color:#f9540a;
          padding-right:3%;
          vertical-align:middle;
      }
      #displaySubmenu ul li a{
          color:#000;
          text-decoration:none;
      }
      #displaySubmenu { 
          background: #ffffff;
          /* absolute to #wrapperWh */
          position:absolute;
          top:100%;
          height:auto;
          z-index:1;
      }
  
  
      /* Call Navigation */
      #callNavigation a{
          color:black;
      }
      #callNavigation a:hover {
          text-decoration:none;
      }
      #callNavigation a p:last-child {
          font-weight:bold; 
      }
      #callNavigation p {
          display:inline;
      }
      #callNavigation p span{
          display:block;
      }
      #callNavigation p span:last-child{
          font-size:2em;
      }
      #callNavigation a i {
          color:#f9540a;
          font-size:3em;
          vertical-align: middle;
          float:left;
          padding-right: 2%;
      }
      /* main content */
          .curtainBackground { 
          top: 0px;
          right: 0px;
          bottom: 0px;
          left: 0px;
          background: rgb(0, 0, 0); /* The Fallback */
          background: rgba(0, 0, 0, 0.7); 
      }
      .wrapperMain {
          overflow:hidden;
      }
      #mainContent {
          height:auto;
          padding: 0;
          background-color: grey;
          z-index:-1; 
          /*relative for floatingText*/
          position:relative;
          font-family:'Droid Sans', sans-serif;
          font-weight:700;
          font-size:1.2em;
          font-family: 'Oswald', sans-serif;
      }
      .floatingText {
          /* absolute for #owl-main*/
          position:absolute;
          top:0;
          left:2%;
          width:100%;
          height:auto;
          color:#000;
      }
      .floatingText h3 {
          font-weight: 800;
          font-size: 3.5em;
      }
      .floatingText h3 span {
          color:#f9540a;
      }
      .floatingText ul {
          list-style:none;
          font-family:'icomoon';
          padding:0;
  
      }
      .floatingText ul li {
          height: 35px;
      }
      .floatingText ul li:before{
          content: "\e803";
          padding-right: 2%; 
          color:#f9540a;
          font-size:2em;
      }
      a.orangeButton {
          background-color:#f9540a;
          color: #FFF;
          padding:10px 50px;
          -webkit-border-radius:40px;
          -moz-border-radius:40px;
          border-radius:40px;
          -moz-box-shadow: 0 0 5px 5px #5b5b5b;
          -webkit-box-shadow: 0 0 5px 5px #5b5b5b;
          box-shadow: 0 0 5px 5px #5b5b5b;
          display: inline-block;
  
      }
      a.orangeButton:hover {
          text-decoration:none;
      }
      .downloadApp {
          margin-top: 5%;
      }
      .downloadApp p {
          font-size:26px;
          margin:0;
      }
      #owl-main &gt; div {
         max-height: 950px; 
      }
      #owl-main &gt; div img {
          margin:0 auto;
          width: 100%;  
      }
      @font-face {
          font-family: 'icomoon';
          src:url('../fonts/icomoon.eot?rdonbp');
          src:url('../fonts/icomoon.eot?rdonbp#iefix') format('embedded-opentype'),
              url('../fonts/icomoon.ttf?rdonbp') format('truetype'),
              url('../fonts/icomoon.woff?rdonbp') format('woff'),
              url('../fonts/icomoon.svg?rdonbp#icomoon') format('svg');
          font-weight: normal;
          font-style: normal;
      }
  
      [class^="icon-"], [class*=" icon-"] {
          font-family: 'icomoon';
          speak: none;
          font-style: normal;
          font-weight: normal;
          font-variant: normal;
          text-transform: none;
          line-height: 1;
  
          /* Better Font Rendering =========== */
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
      }
      [data-icon]:before {
          font-family: 'icomoon';
          content: attr(data-icon);
          speak: none;
          font-weight: normal;
          -webkit-font-smoothing: antialiased;
      }
      .icon-approved:before {
          content: "\e800";
      }
      .icon-facebook:before {
          content: "\e801";
      }
      .icon-phone:before {
          content: "\e802";
      }
      .icon-tick:before {
          content: "\e803";
      }
      .icon-twitter:before {
          content: "\e804";
      }
      .icon-youtube:before {
          content: "\e805";
      }
  
  
  
      /* Large devices Bootstrap(large desktops, 1200px and up) */
      @media screen and (max-width:1200px) { }
  
      /* Medium devices Bootstrap(desktops, 992px and up) */
      @media screen and (max-width:992px) {
        #topNavigation.navbar-default {
              font-size: 1em;
          }
          #topNavigation ul {
          padding:0;
      }
          #socialNavigation li a i{
          font-size: 2.8em;
      }
      }
      /* Small devices Bootstrap(tablets, 768px and up) */
      @media screen and (max-width:768px) {  
  
      .navbar-nav{
              margin:0;
          }
            #topNavigation {
              width:100% !important;
              border:none;
              box-shadow: none;
              -webkit-box-shadow: none;
              -moz-box-shadow: none;
              font-weight: 400;
      }
      #topNavigation ul {
          padding:0;
      }
      #topNavigation li {
          padding:1%;
      }
      /*for better responsive*/
      #topNavigation li:first-child,
      #topNavigation li:nth-child(2),
      #topNavigation li:nth-child(3),
      #topNavigation li:nth-child(4),
      #topNavigation li:last-child {
          width:100%;
          border:none;
          box-shadow: none;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;   
          padding: 1% 2%;
      }
      #topNavigation li a {
          padding:1%;
      }
      #topNavigation li a span {
          display:inline;
      }
      #socialNavigation {
         position: absolute;
         left: 3%;
         top:0%;
      }
      #socialNavigation li {
          float:left;
          display:inline;
      }
      #socialNavigation li a i{
          font-size: 2.8em;
      }
      }
      @media screen and (max-width:332px) { 
        #topNavigation li a {
          padding:2%;
      }
      }
  </code></pre>
  
  <p>I am using overflow:hidden on .wrapperMain, as otherwise it doesn't have height and consequently I can't apply the.curtainBackground. But because of this overflow, the orange button becomes not clickable!!!</p>
  
  <p>I have tried several things.... clearing the container....overflow-x overflow-y, z-index high for the button... but nothing works. </p>
  
  <p>You see, if instead I try to use overflow:auto, It makes appear an horizontal scrollbar, which is wrong too.</p>
  
  <p>So the best approarch it's the one there is at the moment, but the button is not clickable. Any suggestion about how to solve this problem?</p>
  
  <p>Thank you!!</p>