title: mCustomScrollbar doesn't work (scroll vertical) with my columns are mousewheel very very slow
body: <p>I´m very frustated since 3 days. Nobody can solve the problem and I have a presentation tomorrow... All is fine for horizontal scroll, firefox chrome, tablet... But the VERTICAL scroll for any content is strange, running a little bit and stopping. And I must wait 3/4 seconds for scrolling again... Also, the mouse wheel is extremely slow. I put my code and hope someone can see it and help me:</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /&gt;
  
      &lt;title&gt;&lt;/title&gt;
  
      &lt;link href="player/video-js.css" rel="stylesheet"/&gt;
      &lt;link href="css/reset.css" rel="stylesheet" type="text/css" /&gt;
      &lt;link href="css/estilosyfnext.css" rel="stylesheet" type="text/css" /&gt;
  
      &lt;script src="js/customScrollBarMobile.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mousewheel.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.form.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.validate.js"&gt;&lt;/script&gt;
      &lt;script src="player/video.js"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.mCustomScrollbar.js"&gt;&lt;/script&gt;
      &lt;link href="css/jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" /&gt;
  
  
  
  
  
      &lt;script&gt;
  
          $(function(){
          $('#contact').validate({
          submitHandler: function(form) {
          $(form).ajaxSubmit({
          url: 'process.php',
          success: function() {
          $('#contact').hide();
          $('#contact-form').append("&lt;p class='thanks'&gt;¡Gracias! Su formulario ha sido enviado.&lt;/p&gt;")
          }
          });
          }
          });
          });
  
      &lt;/script&gt;
  
      &lt;script&gt;
          $(function(){
              $("#contenedorP").wrapInner("&lt;table cellspacing='0'&gt;&lt;tr&gt;");
              $(".post").wrap("&lt;td&gt;&lt;/td&gt;");
              $("body").mousewheel(function(event, delta) {
                  this.scrollLeft -= (delta * 30);
                  event.preventDefault();
              });   
          });
  
      &lt;/script&gt;
  
  
      &lt;script&gt;
  
          $(document).ready(function () {
  
              $(".post").fadeTo(1, 0.8);
              $( "#contenedorP" ).draggable({ axis: 'x' });
              $(".post").hover(
                  function () {
              $(this).find("#scroll_column").fadeTo("normal", 1);
              $(this).fadeTo("fast",     1);
                  },
              function () {
              $(this).find("#scroll_column").fadeTo("normal", 0); 
              $(this).fadeTo("normal", 0.8);
              }
              ); 
  
              //Moveme//
              // CALCULO HASTA DONDE SE TIENE QUE DESPLAZAR LA CAPA//
              $('#flekdek').click(function() {  
                  if ($(':animated').length) {
                      return false;
                  }
  
                  if($('#wrapper').width() - $(window).width() + $('#wrapper').position().left &gt;= 0) {
                      $('#wrapper').animate({left: '-=780'}, 1500, "easeOutQuad", function() {
  
                          console.debug("position " + $('#wrapper').position().left + "ancho total " + $('#wrapper').width() + 
                                          "ancho ventana " + $(window).width());
  
                      });
                  }
  
              });
  
              $('#flekizq').click(function(e) {  
  
                  // console.debug("offset " + $('#wrapper').offset().left + " position " + $('#wrapper').position().left + 
                  //                              "ancho total de la capa" + $('#wrapper').width() + "ancho ventana " + $(window).width());
  
                  if ($('#wrapper').position().left!=0)
                  { 
                      if ($(':animated').length) {
                          return false;
                      }
  
                      $('#wrapper').animate({left: '+=780'}, 1500, "easeOutQuad", function() {
  
                      }); 
                   }
              });
  
          });
  
          //fade in//
          $(function() {
              $("#contenedorP").fadeIn(1000);
  
              $('div').on('click', function(){
                   $('#flekdek').click();
                   return false;
              });
          });
  
  
          //scroll everywhere//
          (function($){
              $(document).ready(function(){
                  $(".content").mCustomScrollbar({mouseWheel:true});
              });
          })(jQuery);
  
  &lt;/script&gt;
  
  &lt;script&gt;
  
  //MY fix div para izquierda derecha//
      $('#fixed').bind('mousewheel', function(e){
          var scrollTo= (e.wheelDelta*-1) + $('#wrapper').scrollTop();
          $("#wrapper").scrollTop(scrollTo);
      });
  
  
  // ir al div elegido no funciona //
  
          jQuery(document).ready(function($) {
  
          $(".scroll").click(function(event){     
              event.preventDefault();
              $('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
          });
      });
  
  &lt;/script&gt;
  
  
  &lt;script type="text/javascript"&gt;
  $("#wrapper").mCustomScrollbar(
  "vertical",200,"easeOutCirc",1.05,"auto","yes","yes",10
  );
  if (jQuery.browser.mobile == true) {
  $("#wrapper").mCustomScrollbarMobile("vertical",200,5); 
  }
  
  &lt;/script&gt;
  
  
  
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;!--flechas--&gt;
      &lt;div id="flekizq" class="left_button"&gt;&lt;img src="img/flecha_left.png" alt=""&gt;&lt;/DIV&gt;
         &lt;div id="flekdek" class="right_button"&gt;&lt;img src="img/flecha_right.png" alt=""&gt;&lt;/DIV&gt;
  
      &lt;div id="top"&gt;
      &lt;h1 id="topmenu"&gt;menu&lt;/h1&gt;
      &lt;div id="menutop"&gt;      
              &lt;ul&gt;
              &lt;li&gt;&lt;a href="#div00" class="scroll"&gt;00&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div04" class="scroll"&gt;01&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div05" class="scroll"&gt;02&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div06" class="scroll"&gt;03&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div07" class="scroll"&gt;04&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div08b" class="scroll"&gt;05&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div08" class="scroll"&gt;06&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div09" class="scroll"&gt;07&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div10" class="scroll"&gt;08&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div11" class="scroll"&gt;09&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div12" class="scroll"&gt;10&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#div13" class="scroll"&gt;11&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
      &lt;/div&gt;
  
  
      &lt;div id="nextcopy"&gt;ENVIAR UN EMAIL&lt;/a&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
  
  
  &lt;div id="contenedorP" class="fadeOnLoad"&gt;
  
  
  
      &lt;div id="wrapper"&gt;
  
  
  
          &lt;div class="post"&gt;
          &lt;div id="div00" class="content"&gt;&lt;/div&gt;
          &lt;div id="div01" class="content"&gt;
          &lt;p&gt;&lt;img src="img/C01.png" alt=""/&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="post"&gt;
              &lt;div id="div02"class="content"&gt;
  
          &lt;p&gt;&lt;img src="img/C02a.jpg" alt="" &gt;&lt;/p&gt;
          &lt;p&gt;&lt;img src="img/C02c.jpg" alt="" &gt;&lt;/p&gt;
          &lt;p&gt;&lt;img src="img/C02d.jpg" alt="" &gt;&lt;/p&gt;
          &lt;p&gt;&lt;img src="img/C02formuoff.jpg" alt="" &gt;&lt;/p&gt;
          &lt;!--temp formulario-- ponerlo al final --&gt;
  
          &lt;div id="contact-form"&gt;    
  
          &lt;form id="contact" method="post" action=""&gt;
          &lt;fieldset&gt;    
  
          &lt;label for="name"&gt;Nombre&lt;/label&gt;
          &lt;input type="text" name="name"&gt;
  
          &lt;label for="email"&gt;E-mail&lt;/label&gt;
          &lt;input type="email" name="email"&gt;
  
          &lt;label for="phone"&gt;Tlf.&lt;/label&gt;
          &lt;input type="text" name="phone"&gt;
  
          &lt;label for="website"&gt;Web Site&lt;/label&gt;
          &lt;input type="url" name="url"&gt;
  
          &lt;label for="message"&gt;Su pregunta/Commentario&lt;/label&gt;
          &lt;textarea name="message"&gt;&lt;/textarea&gt;
  
          &lt;input type="submit" name="submit" id="submit" value="Send Message" /&gt;
  
          &lt;/fieldset&gt;
          &lt;/form&gt;
  
          &lt;/div&gt;&lt;!-- /end #contact-form --&gt;       
  
          &lt;p&gt;&lt;img src="img/C02e.jpg" alt="" &gt;&lt;/p&gt;
              &lt;/br&gt;
              &lt;/br&gt;
              &lt;/br&gt;
              &lt;/br&gt;
              &lt;/br&gt;
              &lt;/br&gt;
              &lt;/div&gt;
          &lt;/div&gt; 
  
          &lt;div class="post"&gt;
  
              &lt;div id="div03"class="content"&gt;
  
              &lt;p&gt;&lt;img class="menuHover" src="img/menu/menuT.png" alt=""&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div00" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu01.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div04" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu02.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div05" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu03.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div06" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu04.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div07" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu05.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div08b" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu06.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div08" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu07.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div09" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu08.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div10" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu09.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div11" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu10.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div12" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu11.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;img class="menuHover" src="img/menu/menupie.png"alt=""&gt;&lt;/a&gt;&lt;/p&gt;
  
  
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div04" class="content"&gt;
              &lt;p&gt;&lt;img src="img/C04.jpg" alt="" &gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div05" class="content"&gt;
              &lt;p&gt;&lt;img src="img/C05.jpg" alt="" &gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div06"class="content"&gt;
              &lt;p&gt;&lt;img src="img/C06.jpg" alt="" &gt;&lt;/p&gt;  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div07"class="content"&gt;
              &lt;p&gt;&lt;img src="img/C07.jpg" alt="" &gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div08b"class="content"&gt;
              &lt;p&gt;&lt;img src="img/equipo.png" alt=""&gt;&lt;/p&gt;
              &lt;p class="E1rollover"&gt;xxxx&lt;/p&gt;
              &lt;p class="E2rollover"&gt;xxxx&lt;/p&gt;
              &lt;p class="E3rollover"&gt;xxx&lt;/p&gt;
              &lt;p class="E4rollover"&gt;xxxxx&lt;/p&gt;
              &lt;p class="E5rollover"&gt;xxxxx&lt;/p&gt;
              &lt;p class="E6rollover"&gt;xxxx&lt;/p&gt;
              &lt;p class="E7rollover"&gt;xxxx&lt;/p&gt;
              &lt;p class="E8rollover"&gt;xxxxx&lt;/p&gt;
              &lt;p class="E9rollover"&gt;xxxxx&lt;/p&gt;
              &lt;p class="E10rollover"&gt;xxxxx&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div03"class="content"&gt;
              &lt;p&gt;&lt;img class="menuHover" src="img/menu/menuT.png" alt=""&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div00" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu01.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div04" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu02.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div05" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu03.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div06" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu04.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div07" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu05.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div08b" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu06.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div08" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu07.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div09" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu08.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div10" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu09.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div11" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu10.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;a href="#div12" class="scroll"&gt;&lt;img class="menuHover" src="img/menu/menu11.png" alt=""&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;p&gt;&lt;img class="menuHover" src="img/menu/menupie.png"alt=""&gt;&lt;/a&gt;&lt;/p&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div08"class="content"&gt;
              &lt;p&gt;&lt;img src="img/C08.jpg" alt="" &gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div09"class="content"&gt;
              &lt;p&gt;&lt;img src="img/C09.jpg" alt=""&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div10"class="content"&gt;
              &lt;p&gt;&lt;img src="img/C10.jpg" alt=""&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="post"&gt;
              &lt;div id="div11"class="content" style="background:white"&gt;
  
              &lt;p&gt;&lt;img src="img/videocab.jpg" alt=""&gt;&lt;/p&gt;
  
  
              &lt;video id="example_video_1" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_corona.jpg" preload="auto" data-setup="{}" style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/coronas.mp4"/&gt;
              &lt;source type='video/webm' src="videos/coronas.webm"/&gt;
              &lt;/video&gt;
  
              &lt;video id="example_video_2" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_real.jpg" preload="auto" data-setup="{}" style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/real.mp4"/&gt;
              &lt;source type='video/webm' src="videos/real.webm"/&gt;
              &lt;/video&gt;
  
  
              &lt;video id="example_video_3" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_oriflame.jpg" preload="auto" data-setup="{}" style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/globaldream.mp4"/&gt;
              &lt;source type='video/webm' src="videos/globaldream.webm"/&gt;
              &lt;/video&gt;
  
  
              &lt;video id="example_video_4" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_carnaval.jpg" preload="auto" data-setup="{}" style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/carnaval.mp4"/&gt;
              &lt;source type='video/webm' src="videos/carnaval.webm"/&gt;
              &lt;/video&gt;
  
              &lt;video id="example_video_5" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_india.jpg" preload="auto" data-setup="{}" style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/india.mp4"/&gt;
              &lt;source type='video/webm' src="videos/india.webm"/&gt;
              &lt;/video&gt;
  
              &lt;p&gt;&lt;img src="img/cortina_video.png" alt=""&gt;&lt;/p&gt;
  
              &lt;video id="example_video_6" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_traditions.jpg" preload="auto" data-setup="{}"style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/tradition.mp4"/&gt;
              &lt;source type='video/webm' src="videos/tradition.webm"/&gt;
              &lt;/video&gt;
  
              &lt;video id="example_video_7" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_coronas2.jpg" preload="auto" data-setup="{}"style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/coronas2.mp4"/&gt;
              &lt;source type='video/webm' src="videos/coronas2.webm"/&gt;
              &lt;/video&gt;
  
              &lt;video id="example_video_8" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_venecia.jpg" preload="auto" data-setup="{}"style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/venecia.mp4"/&gt;
              &lt;source type='video/webm' src="videos/venecia.webm"/&gt;
              &lt;/video&gt;
  
              &lt;video id="example_video_9" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_suntory.jpg" preload="auto" data-setup="{}"style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/suntory.mp4"/&gt;
              &lt;source type='video/webm' src="videos/suntory.webm"/&gt;
              &lt;/video&gt;
  
              &lt;video id="example_video_10" class="video-js vjs-default-skin" controls width="376" height="264" poster="img/video_previo_orangina.jpg" preload="auto" data-setup="{}"style="background:white"&gt;
              &lt;source type="video/mp4" src="videos/origina.mp4"/&gt;
              &lt;source type='video/webm' src="videos/origina.webm"/&gt;
              &lt;/video&gt;
  
              &lt;/br&gt;
              &lt;/br&gt;
  
  
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;div class="post"&gt;
              &lt;div id="div12"class="content"&gt;
              &lt;p&gt;&lt;img src="img/C12.jpg" alt=""&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="post"&gt;
              &lt;div id="div13"class="content"&gt;
              &lt;p&gt;&lt;img src="img/C13.jpg" alt=""&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
      &lt;div id="footer" style="clear:both"&gt;
  
                  &lt;!--Control wrapper DEKIZQ--&gt;
              &lt;ul&gt;
              &lt;!--li id="flekizq" align="center"&gt;&lt;img src="img/flecha_left.png" alt=""&gt;&lt;/li&gt;--&gt;
              &lt;li id="fleknext"align="center"&gt;&lt;img src="img/logopeke.png" alt=""&gt;&lt;/li&gt;
              &lt;!--li id="flekdek" align="center"&gt;&lt;img src="img/flecha_right.png" alt=""&gt;&lt;/li&gt;--&gt;
              &lt;/ul&gt;
              &lt;!--Control wrapper DEKIZQ--&gt;
  
      &lt;/div&gt;  
  
  
  
  
  &lt;/body&gt;
  &lt;script&gt;
  $(window).load(function() {
  $(".content").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes");
  });
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>html {
              overflow: hidden;
          }
  
  body { 
      font-size: 62.5%; 
      font-family: 'Lucida Grande', Helvetica, sans-serif;
      background: white;
      color: #999; 
      overflow-x: hidden;
      background: url(../img/BG2.jpg) repeat;
  
      }
  
  #contenedorP{
      display:none; 
      position:absolute;
  
      left:0px;
  
  }
  
  
  #wrapper{
      height:555px;
      max-height:555px;
      position: absolute;  
      left:0px;
      -moz-box-shadow: 0px 6px 5px #888;
      -webkit-box-shadow: 0px 6px 5px #888;
      box-shadow: 0px 6px 5px #888;
      margin-top:22px;
      margin-bottom: 20px;
      padding-top: 2px;
      width: 4442px;
      overflow:hidden;
      background: white!important;
  
  }
  
  .left_button{
  
         POSITION:fixed;
         left:0px;
         top:300px;
         font-size:50px;
         margin-left: 5px;
         z-index:100;
         opacity: 0.4;
  }
  .right_button{
  
         POSITION:fixed;
         right:0px;
         top:300px;
         font-size:50px;
         margin-right:5px;
         z-index:100;
         opacity: 0.4;
  
  }
  
  .left_button:hover{
  
         POSITION:fixed;
         left:0px;
         top:300px;
         font-size:50px;
         z-index:100;
         opacity: 1;
  }
  .right_button:hover{
  
         POSITION:fixed;
         right:0px;
         top:300px;
         font-size:50px;
         z-index:100;
         opacity: 1;
  
  }
  
  
  #scroll_column{
     display:none;
  }
  
  
  #div03{
      background: #888888;
      margin-right:5px;
  }
  
  .menuHover{
      opacity: 1;
  }
  
  .menuHover:hover{
      opacity: 0.4;
  }
  
  
  #fixed { 
      position: fixed; 
      right: 50%;
      }
  
  
  #menutop li{
      color: grey;
      text-align: center;
      cursor: pointer;
      display: inline-block;
      margin-top: 6px;
      margin-left:5px;
  
  }
  
  #menutop li a{
      color: grey;
      text-decoration: none;
  
  }
  
  #menutop li a:hover{
      color: white;
  
  }
  
  
  #nextcopy{
      font-size: 14px;
      color: #C4C4C4;
      padding-right:85px;
      margin-right:5px;
      margin-top: -10px;
      float: right;
      background: url(../img/top_mail.jpg) center right no-repeat;
  }
  
  #nextcopy a{
      color: grey;
      text-decoration: none;
  
  }
  
  #nextcopy a:hover{
      color: white;
  
  }
  
  
  #footer{
      left:0px;
      margin-top: 5px;
      width: 100%;
      position: absolute;
      top: 590px;
  
  }
  
  
  #footer li#fleknext{
      text-align: center;
      margin-top:4px;
  }
  
  li#flekdek, li#flekizq{
      color: grey;
      text-align: center;
      cursor: pointer;
      display: inline-block;
      margin-top: 3px;
  
  }
  
  
  .mCustomScrollBox a img{
      margin-right:-5px;
      margin-top:15px;
  
  }
  
  img:hover{
      cursor:pointer;
  }
  
  #top{
       z-index:99;
      background: black;
      height:25px;
      width: 100%;
      position:fixed;
      top:0px;
      -moz-box-shadow: 3px #888;
      -webkit-box-shadow:3px #888;
      box-shadow: 3px #888;
  
  }
  
  h1#topmenu{
      font-size: 14px;
      color: #C4C4C4;
      margin-left:25px;
      padding-top: 3px;
      float: left;
  }
  
  
  
  /*def*/
  * {
      margin: 0; 
      padding: 0; 
  }
  
  tr { 
      vertical-align: top;
  }
  .post { 
  
  
  }
  p { 
      font-size: 1.2em; 
      margin: 0 0 05px 0; 
  }
  
  h2 { 
      font-family: Sans-serif; 
      font-size: 3.0em;
      letter-spacing: -1px; 
      color: #ccc; 
  }
  
  table, table td {
      padding: 0; border-spacing: 1px}
  /*Init Scrolll*/
      {
          margin: 0;
          padding: 0;
      }
  
  
      .bsa_it_ad {
          padding: 8px 4px 8px 12px !important;
          position: relative;
          border: 0 !important;
          background: #D6D5D5 !important;
          border-top: 0 !important;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
          font: 11px "Lucida Grande", Sans-Serif !important;
      }
      .bsa_it_ad:before, .bsa_it_ad:after {
          content: "";
          position: absolute;
          top: 0;
          left: 6px;
          width: 100%;
          height: 100%;
          background: #989898;
          border-bottom: 6px solid #989898;
          z-index: -1;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
      }
      .content{
          margin:0px;
          margin-top: 2px; 
          height:610px;
          max-height:610px; 
          padding:0px; 
          overflow:auto; 
          float:left; 
          /*background:#282828;
          background:#121212;*/
          }
  
  
      .bsa_it_ad:before {
          top: 0;
          left: 12px;
          z-index: -2;
          background: #6C6666;
          border-bottom: 12px solid #6C6666;
      }
  
      .bsa_it_ad a {
        margin: 0 !important;
          padding: 0 !important;
      }
      .bsa_it_ad a img {
        border: 0 !important;
          position: static !important;
      }
      .bsa_it_ad a:hover img {
          margin: 0 !important;
      }
      .bsa_it_ad a:hover {
        background: none !important;
      }
      .bsa_it_i {
          margin: 0 15px 0 0 !important;
      }
      .bsa_it_t {
          font-size: 14px !important;
          margin: 12px 0 0 0 !important;
      }
      .bsa_it_d {
          padding-right: 10px;
      }
      .bsa_it_p{
          display: none !important;
      }
      #demo-bar-ad {
          width: 416px;
          position: absolute;
          right: 0;
          top: -20px;
          font: 11px "Lucida Grande", Sans-Serif !important;
      }
      #bsap_aplink {
          position: absolute;
          color: #999;
          text-decoration: none;
          bottom: 8px !important;
          right: 8px !important;
          padding: 0 !important;
      }
      .bsa_it_p a:hover {
          background:none !important;
      }
      #demo-top-bar {
          text-align: left;
          background: #e18728;
          position: relative;
          zoom: 1;
          width: 100% !important;
          z-index: 6000;
          box-shadow: 0 0 10px black;
          padding: 20px 0 15px;
      }
      #demo-bar-inside {
          width: 960px;
          margin: 0 auto;
          position: relative;
      }
      #demo-top-bar:before, #demo-top-bar:after {
          content: "";
          position: absolute;
          top: 0;
          left: 6px;
          width: 100%;
          height: 100%;
          background: #e18728;
          border-bottom: 6px solid #8F5314;
          z-index: -1;
          box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.1);
      }
      #demo-top-bar:before {
          top: 0;
          left: 12px;
          background: #6C6666;
          border-bottom: 12px solid #62390E;
      }
  
      #demo-bar-buttons {
          display: inline-block;
          width: 236px;
          text-align: center;
          vertical-align: top;
          font-size: 0;
      }
      #demo-bar-buttons a {
          font-size: 12px;
          color: white;
          display: block;
          margin: 2px 0;
          text-decoration: none;
          font: 14px "Lucida Grande", Sans-Serif !important;
      }
      #demo-bar-buttons a:hover,
      #demo-bar-buttons a:focus {
          color: #333;
      }
  
      #demo-bar-badge {
          display: inline-block;
          width: 302px;
          padding: 0 !important;
          margin: 0 !important;
          background-color: transparent !important;
      }
      #demo-bar-badge a {
          display: block;
          width: 100%;
          height: 38px;
          border-radius: 0;
          bottom: auto;
          margin: 0;
          background: url(/images/examples-logo.png) no-repeat;
          background-size: 100%;
          overflow: hidden;
          text-indent: -9999px;
      }
      #demo-bar-badge:before, #demo-bar-badge:after {
          display: none !important;
      }
  
   /*Formulario*/
  
   /*-------------------------------------
  FORM CORE
  ------------------------------------------*/
  
  form#contact fieldset {
      padding: 10px 20px 20px 20px;
      margin: 0 auto;
      border: 0;
      background-color: #fff;
      width: 290px;
      text-align: left;
      border-radius: 8px;
      -webkit-border-radius: 8px;
      -moz-border-radius: 8px;
      -moz-box-shadow: 0px 0px 10px #d3d3d3; 
      -webkit-box-shadow: 0px 2px 10px #d3d3d3; 
      box-shadow: 0px 0px 10px #d3d3d3; 
  }
  
  form#contact input[type="text"], input[type="url"], 
  input[type="email"], input[type="tel"], textarea {
      margin: 3px 0 0 0;
      padding: 6px; 
      width: 260px; 
      font-family: arial, sans-serif; 
      font-size: 12px; 
      border: 1px solid #ccc;
      background: -webkit-gradient(linear, left top, left 15, from(#FFFFFF), color-stop(4%, #f4f4f4), to(#FFFFFF));
      background: -moz-linear-gradient(top, #FFFFFF, #f4f4f4 1px, #FFFFFF 15px);
  }
  
  form#contact textarea {
      width: 275px; 
      height: 150px;
  }
  
  form#contact label {
      display: block;
      font-size: 13px;
      color: #666;
      margin-top: 10px;
      font-weight: bold;
  }
  
  form#contact label.error { 
      width: 270px;
      margin: 3px 0 0 0;
      display: block;
      color: #cf0101;                              
      font-size: 11px; 
      text-align: right;
  }
  
  form#contact .placeholder {
      color: #aaa;
  }
  
  form#contact .button {
      display: inline-block;
      margin: 15px 0 0 90px;
      padding: 5px 15px 5px 15px;
      background-color: #ff9e00;
      border: none;
      color: #fff;
      -moz-border-radius: 15px;
      -webkit-border-radius: 15px;
      border-radius: 15px;
  }
  
  form#contact .button:hover {
      background-color: #fc8500;
      cursor: pointer;
  }
  
  form#contact .button:active {
      margin-top: 16px;
      background-color: #f08004;
      cursor: pointer;
  }
  </code></pre>