Home/ Questions/Q 3484104
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T10:45:03+00:00

I need a vertically scrollable div of a specific width. However, setting the width

  • 0

I need a vertically scrollable div of a specific width. However, setting the width to, say, 200px will actually give me (for example) 190px of available space, and 10px of scrollbar, e.g.

#area {
  display: inline-block;
  width: 200px;
  overflow: auto;
}
...
<div id="area">(data using max. 200px of width)</div>

Because it’s lacking the width of the scrollbar as actual space, I end up with a minimal, almost useless (and very ugly) horizontal scrollbar.

Is there a way to either get the scrollbar size (besides getting the difference with the next element, feels too hackish) or to just say “width-without-scrollbar: 200px”?

I’m using jQuery, a (more) dynamic solution using jQuery is also acceptable (but I’d rather not use jQuery scrollbar implementations, if possible I want to stick to native scrollbars).

Also, I’d rather not depend on CSS3 features.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    To answer my own question (but still looking for alternatives), calculating the difference using a 100% width “detector” and then resizing does the trick for me. As I said, using Javascript to fix this is not a problem in my case but this is probably not how you want to style your own website 🙂

    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <style type="text/css">
        #outer {
                display: inline-block;
                width: 200px;
                height: 100px;
                overflow: auto;
        }
        .detector {
               width: 100%;
               height: 0px;
        }
        .entry {
                display: inline-block;
                width: 200px;
        }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
               var outer = $("#outer");
               var detector = $("#outer .detector");
               var scrollsize = 200 - detector.width();
               outer.width(200 + scrollsize);
            });
        </script>
</head>
<body>
<div id="outer">
   <div class="detector">
   </div>
   <div class="entry">
   I'm a short entry
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
   <div class="entry">
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   I'm an entry div but I'm very, very, very, very, very, very, very, very, very, very long
   </div>
</div>
</body>
</html>

    This will calculate the difference between the available space (which will be 200) and the used space by the “detector” (which is, for example, 185px). This means the scrollbar size is 15px. Making #outer 15px wider will give us a full 200px-wide area (and remove the horizontal scrollbar)

    • 0