I am having a issue here. There are two div's here "div1" and "div2". Here I want to adjust the "div1" width according to the "div2" width. My requirement is The width of the scrollBar should not be included for the "div1" i.e i should set the height of the "div1" excluding the width of the scrollBar in "div2". I want a jquery function to find the width and to reduce the width of "div1".. Sample requirement is shown below

html

<div class="div1"></div>
<div class="div2">HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello</div>

css

.div1
{
    width:100px;
    height:100px;
    border:1px solid black;
}
.div2
{
    width:100px;
    height:300px;
    border:1px solid black;
    overflow:auto;
    word-break:break-all;
}

The Fiddle Demo is here

Fiddle

I am having a issue here. There are two div's here "div1" and "div2". Here I want to adjust the "div1" width according to the "div2" width. My requirement is The width of the scrollBar should not be included for the "div1" i.e i should set the height of the "div1" excluding the width of the scrollBar in "div2". I want a jquery function to find the width and to reduce the width of "div1".. Sample requirement is shown below

html

<div class="div1"></div>
<div class="div2">HelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHelloHello</div>

css

.div1
{
    width:100px;
    height:100px;
    border:1px solid black;
}
.div2
{
    width:100px;
    height:300px;
    border:1px solid black;
    overflow:auto;
    word-break:break-all;
}

The Fiddle Demo is here

Fiddle

• javascript
• jquery
• width
• scrollbar

• try this - jsfiddle/d34Fk/1 – Sudharsan S Commented Jul 7, 2014 at 7:17
• 1 i am expecting a jquery function to dynamically reduce the width, it should not be hard coded – Krishna Commented Jul 7, 2014 at 7:20
• ok now try - jsfiddle/d34Fk/3 – Sudharsan S Commented Jul 7, 2014 at 7:25
• K.. Here the scroll Width is hard coded. Anyway to get the scroll-Bar width dynamically – Krishna Commented Jul 7, 2014 at 7:28

1 Answer 1

See this: http://jsfiddle/d34Fk/5/

jQuery :

var width = $('.div2')[0]['clientWidth'];
$('.div1').css({'width':width+'px'});