css - Content-dependent div with labels -

<div id="combobox">     <label><input type="checkbox" id="tag3"         name="checkbox" onclick="toggletag('tag3')"/>dialogproc</label><br/>     <label><input type="checkbox" id="tag2"         name="checkbox" onclick="toggletag('tag2')"/>fds</label><br/> </div> 

i'm using div container checkboxes labels. corresponding css:

div#combobox {     max-height: 150px;     overflow: auto;     border: 1px solid #000000; } 

and want - vertical scrollbar (no horizontal one), capped height , content-dependent width. 1 exception - doesn't take vertical scrollbar's width account. when there few lines/checkboxes , vertical scrollbar isn't needed - width of div width of widest checkbox. when scrollbar appears, width of div unchanged:

the label broken 2 lines. fixed span:

<span><label><input type="checkbox" id="tag4"     name="checkbox" onclick="toggletag('tag4')"/>initializewindow</label></span><br/> 

and:

span {     white-space:nowrap; } 

but div's width still incorrect:

is there way make div take scrollbar's width account html/css? if not, what's best way javascript?

i suggest use this:

(function($) {     $.fn.hasscrollbar = function() {         return this.get(0).scrollheight > this.height();     } })(jquery); 

so can check if there scroll activated:

$('#combobox').hasscrollbar(); // returns true if there's `vertical` scrollbar 

after can expand size of div javascript...this work you:

$('#combobox').css("width",$('#combobox').width+13); //this example use 13px need test in browsers see how works