Question

I have run into a little issue with placing divs inside a jQuery UI tabbed div to which I cannot find a logical solution (the illogical one I have in place and it works).

The problem is this

1. I have a jQuery tab view (call it container) with three tabs
2. The top most tab has three panels (divs) – call them toolbar, properties and editbox
3. All three are floated left with the third one having the clear:right setting
4. All three have a 3px badding and a 1px border
5. All three have box-sizing:border-box
6. The first two are, respectively,40px and 200px wide.
7. The width of the third panel, editbox is set to 100px in CSS
8. I then attempt to use a spot of jQuery to change that width to fill the available area. The calculation goes something like this

I don’t get it – I thought specifying border-box simply takes care of everything and I never need to worry about padding and border ever again. Evidently, I have got my understanding wrong. I’d much appreciate any help.

 var w = $('#container').width() - $('#toolbar').width - $('#properties').width;

//Now if I assign that to the editbox

$('#editbox').css('width',w + 'px') //I find that editbox flows down below the other two.  In order for things to work I have to deduct 24 fom the width calculation above.  i.e.

w -= 3x2*padding (2px) + 3*1*border(1 px)

Answer 1

Try using the outerWidth() function instead of width(). From jQuery’s documentation for outerWidth:

Returns the width of the element, along with left and right padding,
border, and optionally margin, in pixels.

See more: http://api.jquery.com/outerWidth/