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?

Solution 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.

Solution 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.

Comments

[user123]

then the other images are not visible anymore, these images needs to be visible but don't give any scrollbar

[Nitesh]

If you want 1000px where the scroll should not come and it still comes in 1020, the case is that you have a padding/margin applied somewhere that is taking those extra pixels. You need to remove it to get your thing working. - @marcoverflow

[user123]

hmm, stupid haven't thought about that, it could be a solution. Thanks for that. Still wonder if there is a other way to do this with css. It should be media max-width 1000px? So all below 1000px then the overflow hidden will be set.

[user123]

you where correct, I used a other method I like better because I can use overflow hidden when having a small browser