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?

Clarinda

I don't get the question, what do you mean by "remove this above 1000px" ? The scrollbar disappears automatically if the window gets wider than 1000px. – Bateman

possible duplicate of large body width without horizontal scrollbar – Bateman

Check my screendump, my images needs to be visible, but the scroll needs to be at 1000px width, When I have a browser at 1020px wide, i get a scrollbar. It needs to be like background images. overflow:hidden would normally be ok, but the images needs to be visible. Overflow hidden removes the scroll, overflow visible doesn't :( – Clarinda

The problem is that the images behind need more width than 1000px. So you have to shrink all images if they should still be shown... Otherwise use overflow-x. – Bateman

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.

Glebe

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. – Clarinda

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

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.

Henryson

Answer 3

I have decided when my browser is smaller than 1200px, the overflow:hidden; on carousel which is 1000px wide can be used. Vladislav Stanic pointed me to the right direction, thanks all.

@media all and (max-width: 1200px) {
   .carousel {
        overflow-x: hidden;
   }
}

Clarinda

Answer 4

Use the overflow-x property to hide the horizontal scroll bar on div that creates the horizontal scrolling.

For Instance,

Overflow-x:hidden;

EDIT

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.

Maestas

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

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 – Maestas