How to ignore a scrollbar width in CSS?

Question

Explanation

I want to line up three boxes in one line horizontally but the last one falls down.

When I remove the scrollbar, it lines up fine.

So, the problem is caused by the scrollbar width.

How can I ignore the scrollbar width in css?

Do I need to write JavaScript code to calculate the scrollbar width and adjust the width of the wrapper dom element?

DEMO & CODE

I posted html and css code in codePen.io.

http://codepen.io/anon/pen/kXAPap

HTML

<div id="main">

    <ul id="window-list">

        <li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li><!--

        --><li class="window">
            <div class="window-thumbnail">
            </div>
        </li>


    </ul>

</div>

CSS

body {
    border-top: solid 1px #a3a1a3;
    margin: 0;
    padding: 20px;
    background-color: #e7e7e7;
}

ul, li, p {

    margin: 0;
    padding: 0;

}

/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/

#main {
    width: 572px;
}


#window-list {

    background-color: #ffffff;
    border: solid 1px #b8b8b8;
    width: 510px;
    height: 350px;
    margin: 0 0 8px 0;
    overflow: scroll; /*This line causes the problem*/
    padding: 10px 30px;
    list-style-type: none;


}

.window {
    display: inline-block;
    margin: 0 18px 18px 0;


}

.window:nth-child(3n) {

    margin-right: 0;

}

.window-thumbnail {

    margin: 0 0 8px 0;
    height: 158px;
    width: 158px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #e0e0e0;
}

also, do you absolutely HAVE to give these boxes a fixed width? — Leo, Aug 05 '16 at 03:14
I think so! I want to imitate this layout. https://inteygrate.com/content/images/2016/05/Screen-Shot-2016-05-30-at-5-28-17-PM-1.png — , Aug 05 '16 at 03:17
[Aligning Three Divs Horizontally Using Flexbox](http://stackoverflow.com/a/32122011/3597276) — Michael Benjamin, Aug 05 '16 at 03:22
Possible duplicate of [Prevent scroll-bar from adding-up to the Width of page on Chrome](http://stackoverflow.com/questions/18548465/prevent-scroll-bar-from-adding-up-to-the-width-of-page-on-chrome) — user, Apr 16 '17 at 09:53

score 5 · Answer 1 · edited May 23 '17 at 10:30

5

One way to do it in pure CSS is to make the scroll bar invisible completely. This will still allow scrolling.

::-webkit-scrollbar { 
display: none; 
}

You can also use jQuery to achieve exactly what you wanted:

$(document).ready(function(){
    var body = $('body');
    var normalwidth = 0;
    var scrollwidth = 0;
    if(body.prop('scrollHeight')>body.height()){
        normalwidth = window.innerWidth;
        scrollwidth = normalwidth - body.width();
        $('#main').css({marginRight:'-'+scrollwidth+'px'});
    }
});

And you can hide the horizontal scroll using:

body {
    overflow-x:hidden;
}

Here's a jsfiddle made by Lwym.
I suggest you check out his original answer too.

edited May 23 '17 at 10:30

Community

1
1

answered Aug 05 '16 at 03:25

Surfine

96
4

2

Permanently enabling the scrollbar, by `overflow-x:scroll`, is better than hiding it, because the scrollbar indicates a lot about the visible part of the list, such as where in the list, what part of the list, and greyed if it is the whole list. No-trivial visual clues. Plus the scrollbar can be used for fine mouse control. – Patanjali Feb 11 '17 at 08:56
[Not supported by firefox](https://caniuse.com/#search=-webkit-scrollbar) though. – Stefan Falk Sep 11 '18 at 11:07

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

1

Unless it is a business requirement to give these boxes a fixed, I would strongly recommend you to give them a variable width using percentage units which will make your document more responsive to different viewport widths and screen sizes.

.container {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
}
.container .box {
  display: inline-block;
  background-color: #ddd;
  width: 28%;
  height: 80px;
  margin: 20px 0 20px 4%;
  border: 1px solid #ddd;
  border-radius: 3px;
  overflow: hidden;
}

<div class="container">
  <div class="box"></div><!--
  --><div class="box"></div><!--
  --><div class="box"></div><!--
  --><div class="box"></div><!--
  --><div class="box"></div>
</div>

Things to note

1- This solution is 99% CSS2-compatible...some features will degrade gracefully such as the border-radius which is currently supported by all major browsers out there

2- you said it doesn't need to be responsive because it's a chrome extension. Well, it does because desktops come in a lot of screen sizes. So, it is responsive

3- I've given the boxes a fixed height to make them look uniform but if you want a variable height you can wrap the boxes in containers with a group of 3 boxes each

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 05 '16 at 03:17

Leo

14,625
2
37
55

It's a chrome extension, so I don't need to make it responsive. It's used only on Desktop. – Aug 05 '16 at 03:19
@Hayatomo you DO need to make it responsive because not all desktops have the same screen size – Leo Aug 05 '16 at 03:38
I'm going to draw a window thumbnail image in canvas inside the div elements with ".window-thumbnail". When I draw the thumbnail image which I screencapture programmatically, I need to specify the width and height. I'm not sure if the image drawn in canvas can be responsive as well. – Aug 05 '16 at 03:53
@Hayatomo of course it can, but you will have to use javascript to dynamically resize the canvas element – Leo Aug 05 '16 at 05:10
For different desktop sizes: not only that, but of course: simply resized windows! For one, I hardly ever maximize a browser window; I have other things to share my limited (never big enough) screen estate with. – Sz. Mar 13 '18 at 02:15
@hytm: images can also be dynamically resized simply by CSS, I did the same in my own picture viewer. (You can even use [various units](https://www.w3schools.com/cssref/css_units.asp) relative to the current viewport (window) size.) – Sz. Mar 13 '18 at 02:22

Joseph Charnin · Answer 3 · 2016-08-05T03:55:08.160

If these have to be fixed, I would highly recommend using flex for this. Here is your CSS using Flex:

body {
    border-top: solid 1px #a3a1a3;
    margin: 0;
    padding: 20px;
    background-color: #e7e7e7;
}

ul, li, p {

    margin: 0;
    padding: 0;

}

/*
1px(border-left) + 30px(padding-left) + 158px(width) + 18px(margin-right) + 158px(width) + 18px(margin-right) + 158px(width) + 30px(padding-right) + 1px(border-right) = 572px
*/

#main {
    width: 572px;
}


#window-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: #ffffff;
    border: solid 1px #b8b8b8;
    width: 510px;
    height: 350px;
    margin: 0 0 8px 0;
    overflow: scroll; /*This line causes the problem*/
    padding: 10px 30px;
    list-style-type: none;


}

.window {
    margin: 0 18px 18px 0;


}

.window:nth-child(3n) {

    margin-right: 0;

}

.window-thumbnail {

    margin: 0 -6px 8px 0;
    height: 158px;
    width: 158px;
    border-radius: 8px;
    cursor: pointer;
    background-color: #e0e0e0;
}

Here is a working example: http://codepen.io/jsanatar/pen/xOyLWK

You changed the width and height of ".window-thumbnail" in your example code from 158px to 150px. When I set the width and height to the original value, the third box falls down. — , Aug 05 '16 at 03:34
Can I take out some of the margin / padding? That is the only way these are going to work. Also, this is just desktop right? It won't look right for mobile. Anyway, updating my example now. — Joseph Charnin, Aug 05 '16 at 03:36
Hayatomo, fixed this example by removing some of the margin. This flex example should work on all devices. I left all the sizes as is. — Joseph Charnin, Aug 05 '16 at 03:58

score 1 · Answer 4 · answered Aug 05 '16 at 03:30

1

Here, http://codepen.io/bhshawon/pen/OXBjOg

Using negative value for margin-right of every 3rd child

.window:nth-child(3n) {

    margin-right: -16px;

}

answered Aug 05 '16 at 03:30

shawon191

1,945
13
28

This will cause responsive issues on smaller phones. – Joseph Charnin Aug 05 '16 at 03:32
1

What's the reason you give "16"? How did you get the number? – Aug 05 '16 at 03:35
Seeing he used fixed pixel value for everything, I doubt it will cause anymore problem than it's already there. If he does convert everything using percent/em value, he can also use the negative margin using percent/em value. @JosephSanatar – shawon191 Aug 05 '16 at 03:36
@Hayatomo It's the lowest value that solves it. I tried 20 first, then decremented from there. – shawon191 Aug 05 '16 at 03:37

score 1 · Answer 5 · answered Mar 24 '23 at 08:30

1

Try

overflow: overlay

see details in https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

answered Mar 24 '23 at 08:30

Jeong Ho Nam

803
12
20

How to ignore a scrollbar width in CSS?

Explanation

DEMO & CODE

HTML

CSS

5 Answers5

Things to note