9000 9000 - 3 months ago 5x
CSS Question

Adjusting a <div> width taking a scrollbar into account

I have two

elements; one of them with a scrollbar on the side:

+-------------+ ?
| div A | ?
+-------------+ ?
| |^|
| | |
| | |
| div B |=|
| | |

I want
div A
to be exactly as wide as
div B
minus the width of its scrollbar. The scrollbar is always there (by explicit
overflow: scroll
div A
is of fixed height and does not need scrolling. I want the client areas of
div A
div B
to be aligned.

I could probably make an artificial scrollbar control using JS. If possible, I'd prefer a CSS-based, native-looking solution, though.

I could put a separate piece of padding where the
on the picture are, if I somehow knew what the platform-dependent width of the scrollbar is.

Is there a way to achieve this, at least in modern browsers?


Another possibility uses only css, and it is very reliable.

On the top div, create a inner div to hold the content, and a hidden pseudo :after element to generate the scrollbar's width. I've used a display: table aligment to keep inline, but other techniques will do as well:

Works like a charm: http://jsfiddle.net/4gu5mkzy/1/

#top {
    width: 100%;
    height: 100px;
    display: table;

#top:after {
    display: table-cell;
    content: "";
    overflow-y: scroll;
    visibility: hidden;

.inner {
    display: table-cell;
    background: yellow;

<div id="top">
    <div class="inner"><!-- content --></div>