width: 100% is different in pixels when scrollbar is on and off

Question

We have HTML with CSS:

<div style="width: 80%"><!--This width can be different or expressed in % -->
    <div>
        <div style="width: 50%; background-color: blue; display: inline-block;">
            <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div><!--
            --><div style="width: 50%; background-color: brown; display: inline-block;">
        <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div>
    </div>
    <div style="height: 110px; overflow-y: scroll;">
        <div style="width: 50%; background-color: yellow; display: inline-block;">
            <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div><!--
        --><div style="width: 50%; background-color: green; display: inline-block;">
        <br/>A<br/>B<br/>C<br/>D<br/>E<br/>F<br/>G<br/>H<br/>I<br/>
        </div>
    </div>
</div>

And a result:

enter image description here

All divs have 50% width, but bottom ones are narrower, because of scroll bar. I know I could calculate scroll bar width and make top ones narrower, but is there better solution? Solution using HTML/CSS only is preferred.

Fiddle here: http://jsfiddle.net/s6rhs/6/

There is a jquery that calculates the width of scroll bars [linked here][1] [1]: http://stackoverflow.com/questions/8079187/how-to-calculate-the-width-of-the-scroll-bar — evilscary, Jan 30 '14 at 14:23
@evilscary: Quote from my question: "I know I could calculate scroll bar width and make top ones narrower, but is there better solution? Solution using HTML/CSS only is preferred." — LukLed, Jan 30 '14 at 14:26
@Mr.Alien: :) It looks fine in Firefox, but not in Internet Explorer or Chrome. I know I can calculate scrollbar width, but it is not a solution I desire. — LukLed, Jan 30 '14 at 14:33
@LukLed yea, but jQuery will be preferable here to be true... as browsers ui for scrollbars vary..so it is better not to go with CSS — Mr. Alien, Jan 30 '14 at 14:39
I did it using `display: table-row;` for parent div, and `display: table-cell` for colored divs, but cannot repeat anymore... — vladkras, Jan 30 '14 at 19:20

score 1 · Answer 1 · answered Jan 30 '14 at 14:29

1

You can use custom jquery scroll bars for your page with the help of some jquery plugins like these

https://github.com/inuyaksa/jquery.nicescroll

So that you won't have trouble with default scrollbars of the browsers.

answered Jan 30 '14 at 14:29

winnyboy5

1,486
3
22
45

I'd prefer to use default scrollbars. – LukLed Jan 30 '14 at 14:37

score 1 · Answer 2 · answered Jan 30 '14 at 14:47

You could use flex layout, introduced in CSS3. Maybe there are too many browsers out there, you want to support, but they could use your current "solution".

Support: http://caniuse.com/#search=flex

If there's a scrollbar, your right container is a little smaller depending on the width of the scrollbar, but that shouldn't be noticed by users.

At the moment, the background scrolls out, but I think you'll find a solution for that.

Now, my answer isn't only text, there's also some code and a jsfiddle for you:

CSS

.flex {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.flex > div {
    flex-grow: 1;
}

.flex > div:first-of-type {
     width: 250px;
     flex-grow: 0;
}

HTML

<div style="width: 500px">
    <div class="flex">
        <div style="background: green">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
        <div style="background: yellow">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
    </div>
    <div class="flex" style="height: 110px; overflow-y: scroll;">
        <div style="background: blue">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
        <div style="background: red">
            <br/>A
            <br/>B
            <br/>C
            <br/>D
            <br/>E
            <br/>F
            <br/>G
            <br/>H
            <br/>I
            <br/>
        </div>
    </div>
</div>

That is nice, but you set width of div to 250px. It solves this problem, but it doesn't solve it when main width is different or specified in %. — LukLed, Jan 30 '14 at 14:52
@LukLed I did that, because you used a absolute width in your question ;) — kelunik, Jan 30 '14 at 14:54
Ok, ok. That was just an example. I would like to find universal solution, for containers with different widths. — LukLed, Jan 30 '14 at 14:56
@LukLed So scrolling each container individually isn't acceptable, I think. — kelunik, Jan 30 '14 at 14:59
what about add scrollbar in the other one @LukLed is not the prettiest solution but I guess is the one with better support — DaniP, Jan 30 '14 at 15:07
That is out of question. Scrollbar must be visible only in bottom one. — LukLed, Jan 30 '14 at 15:13

width: 100% is different in pixels when scrollbar is on and off

2 Answers2

CSS

HTML