Horizontal scrollbar appearing due to vertical scrollbar - HTML layout

Question

Please have a look at http://jsfiddle.net/RRkC7/

I have set the width of the enclosing DIV tag "c" exactly to the width of the child table t1. However, due to the horizontal scroll bar, the vertical scroll bar appears. Ideally since the width of "c" is exactly the same as "t1", the horizontal scroll should not appear.

And ideas on how to avoid this.

Please note, I can't hard code anything. The inner TABLE may increase in width when more content is added and when that happens I resize the container div tag.

I also want both the horizontal and vertical scrollbars appearing in cases where the width of the table exceeds a certain number.

Thanks, Arun

<div id="p" style="overflow:hidden">
    <div id="c" style="overflow:auto">
        <table id="t1">
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
            <tr><td>testing_testing_testing</td><td>testing_testing_testing</td></tr>
        </table>
    </div> </div>

Answer 1

It may be because of the padding, I don't know, but modifying your javascript worked.

$(function(){
    $("#c").width($("#t1").width() + 20);
    $("#c").height(150);
})

http://jsfiddle.net/RRkC7/1/

I played around with the elements inside the table and the width changed just fine

Answer 2

Specify a width for your c div and don't define any width for the table so in that case table will inherit the width of c div. Now play with the overflow properties for table. So, now the scrollbar will only appear if the table get more data and due to which its width will be more than that of defined for c div.

    overflow:scroll;

Answer 3

It's not about adding or subtracting a fixed amount from the width but if you've noticed the CSS padding: 5px which increases the div's width by 2 times the padding as padding-left and padding-right would come in the picture. So you need to add the exact amount of padding which in this case is 10px.

You may calculate the width and padding like

$(function(){
    var toBeWidth = $("#t1").width() + (parseInt($("#t1").css("padding-left").split("px")[0])*2)
    $("#c").width(toBeWidth);
    $("#c").height(150);
});