border cause DIV overflow

Question

I have a root div with width:80% and a child with width:100%, when I add to the child a border a scroll bar appear. I guess it's because 100% width + 1px border overflow. Can I avoid such problem? How to define a child div as wide as the parent including borders?

I need this to run on IE8

<div style="width:80%;overflow:auto;">
    <div style="float:left;width:100%;border-left:1px solid;">
        <div class="title">Title1</div>
        <div style="width:100%;">
            <div class="title">Title2</div>
            <div class="title">Title3</div>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div>text</div>
    <div>text</div>
</div>

CSS

div.title {
    float: left;
    width:33%;
}

Example: http://jsfiddle.net/FN3mv/

Answer 1

Add box-sizing: border-box to your 100% width element.

You will also need -moz-box-sizing: border-box.

Answer 2

You have assigned width to 100% and adding borders of 1px will add 2px + 100% if you need borders you need another parent div

<div style="width:50%;overflow:auto;">
    <div style="border:1px solid;">
    <div style="width:100%;">
        <div style="float: left;width:50%;">AAA</div>
        <div style="float: left;width:50%;">BBB</div>
        <div style="clear:both;"></div>
        </div></div>
    <div>A1</div>
    <div>A2</div>
</div>