Nested divs bigger than parent div

Question

I am using CSS to skin a scroll bar that is created using JavaScript.

.scrollbar-track{
    background: black;
    height: 10px;
}
 
.scrollbar-thumb{
    cursor: default;
    border: 1px red solid;
    width: 50px;
    padding: 0;
}

.scrollbar-thumb-first{
    display: inline-block;
    background: green;
    width: 5px;
    height: 10px;
}
 
.scrollbar-thumb-middle{
    display: inline-block;
    background: red;
    height: 10px;
    width: 20px;
}
 
.scrollbar-thumb-last{
    display: inline-block;
    background: blue;
    width: 5px;
    height: 10px;
}

<div class="scrollbar">
    <div class="scrollbar-track" style="width: 970px;">
        <div class="scrollbar-thumb">
            <span class="scrollbar-thumb-first"></span>
            <span class="scrollbar-thumb-middle"></span>
            <span class="scrollbar-thumb-last"></span>
        </div>
    </div>
</div>

And this is the fiddle: http://jsfiddle.net/w27wM/8/

Why is the inner div somehow larger than the parent div? Even with margin and paddings set to 0, the issue still remain.

Can you use `display:block` and `float:left`; it appears to be a problem with `display:inline-block`. Also, the border takes up 2px top and bottom, so you would need to set the heights to 8px. — mowwwalker, Mar 07 '12 at 00:11

score 4 · Accepted Answer · edited May 23 '17 at 11:47

4

Issue resolved by changing all the display: inline-block to float: left.

The problem may be related to this question, but removing all the whitespace didn't fix it for me. This might be due to the node being created in javascript.

edited May 23 '17 at 11:47

Community

1
1

answered Mar 07 '12 at 00:15

F21

32,163
26
99
170

score 1 · Answer 2 · answered Mar 07 '12 at 05:46

Its a simple problem. By default the span line-height is 20px. An inline-block element read line-height to vertical-align.

So solution is either specify

line-height: 10px; or float: left;

Eg:

.scrollbar-thumb span{
   line-height: 10px;
}

or

.scrollbar-thumb span{
   float: left;
}

score 0 · Answer 3 · answered Mar 07 '12 at 00:03

0

The .scrollbar div is not given an explicit width so it assumes the default = 100% of the width given by its parent.

The .scrollbar-track is given an explicit width of 970px which is beyond the width of the parent and the parent's parent. Thus, .scrollbar ends up thinner than its wide child .scrollbar-track.

Why are you setting the scrollbar-track explicitly but not doing the same for the .scrollbar (parent)?

answered Mar 07 '12 at 00:03

ghbarratt

11,496
4
41
41

Tried setting width to both `.scrollbar-track` and `.scrollbar`, but I am still getting the unwanted padding (top and bottom) in the thumb. – F21 Mar 07 '12 at 00:07
The space between the thumb pieces is due to the spaces found between the spans. You will need to remove all textual white space to have the spans line up right next to each other, either that or change their display properties. See http://jsfiddle.net/w27wM/61/ – ghbarratt Mar 07 '12 at 01:04
If you ever try to set the height shorter than the line-height, then it is a good idea to set the line-height explicitly, along with the height. Also an `overflow: hidden;` can be helpful in those special cases. Have a look at this: http://jsfiddle.net/w27wM/62/ – ghbarratt Mar 07 '12 at 01:13

Nested divs bigger than parent div

3 Answers3