div в div (pading/marging)

[Arhidiablo]

Доброго времени суток, ситуация такова есть div он width:100% в нем 2 div'a по width:50% и с float;left, в одном из половинчатых div'ов вбиваю еще один див с параметрами width:100%, так вот если я последнему div'у задаю padding или marging к примеру 10px то он заходить на соседний div. Получается 100%+(10px+10px) и за счет этого вылазает, как сделать так чтобы этот отступ вычитывался из 100; последнего div'а?

пример:

HTML:

<div class="main">
    <div class="left">
	    <div class="title">Титул</div>
    </div>
    <div class="right">1</div>
</div>

CSS:

.main {width:100%;background:#000;}
.left {width:50%;height:100px;background:#f00;float:left;z-index:101;opacity: 0.6;}
.right {width:50%;height:100px;background:#00f;float:left;z-index:101;opacity: 0.6;}
.title {width:100%;background:#0f0;margin:10px;z-index:111;}

Вот наглядный пример (HTML,CSS):

http://jsfiddle.net/HgeD8/

Заранее благодарю за ответ и прошу прощения если вопрос очень простой, поиск мучал не знал как правильно сформулировать, везде вопрос решается за счет того, что если div имеет не %, а фиксированую ширину тогда получается оно все во внутрь вдавливается, а у меня проценты =(

Edited August 15, 2013 by Arhidiablo

[valera]

а если убрать width:100%; в блоке title?

или

http://jsfiddle.net/bnJEB/

Edited August 16, 2013 by valera

[npofopr]

box-sizing: border-box;

[Arhidiablo]

Шикарно!! Ребята благодарю Вас! Очень полезная информация! Оба варианта пригодятся =) Низкий вам поклон =)