Remove scrollbar like overflow hidden but needs to be visible

Question

When you smallen your browser to 1000px width then there is a horizontal scrollbar, is there any way to remove this above 1000px? Check my screendump below.

I have tried a clearfix but this didn't help and tried overflow:visible;

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden; 
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

Any clean easy way to fix this with css?

Answer 1

@media all and (min-width: 1000px) {
body {
  margin:0;
}
.wrapper {
  overflow-x: hidden;
  }
}

If browser is more then 1000px wide there won't be horizontal scroll.

Answer 2

The only thing that you can do (which still keeps your site accesible), is set the width on which the scrollbar should appear.

You can fix that by setting a minimum width for the body.

Add this to your stylesheet:

body { min-width: 1200px; }

When the browser is resized smaller than 1200px, the scrollbar will appear.