div％widthとpx border

Question

div内に3つのdivを作成しようとしています。

.outter 
    { 
     right: 100px; 
     border: 10px solid white; 
    } 
    .main 
    { 
     overflow: hidden; 
     width: 100%; 
     height: 150px; 
    } 
    .left 
    { 
     float: left; 
     width: 40%; 
     height: 100%; 
     background-color: green; 
     border-right: 5px solid white; 
    } 
    .center 
    { 
     float: left; 
     width: 40%; 
     height: 100%; 
     background-color: red; 
     border-left: 5px solid white; 
     border-right: 5px solid white; 
    } 
    .right 
    { 
     float: right; 
     width: 20%; 
     height: 100%; 
     background-color: orange; 
     border-left: 5px solid white; 
    } 



<div class="outter"> 
    <div class="main"> 
     <div class="left"> 
     </div> 
     <div class="center"> 
     </div> 
     <div class="right"> 
     </div> 
    </div> 
</div> 

これは私が今までに得たものです。 - 親ディビジョンには、適切な距離が100pxに固定され、境界線は10px白で、widhtは100％〜100pxです。 -The内部のdivは10ピクセル（のそれらの間の距離で40％+ 40％+ 20％を有していて、私は私はボーダー左5及びボーダー右5.

をパット理由厥私は必要なもの。これを設定する問題を持つことは右にサイズのボーダーとマージンを固定していることである。他のdivには100％の幅を気力するダイナミックでなければなりません。

誰も私を助けることができますか？

よろしく、

Answer 1

あなたはこのためにbox-sizingを使用することができます。このように書きます：

.main, 
.main >*{ 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box; 
} 

チェックこの：

http://jsfiddle.net/ubtdT/

Answer 2

Y box-modelに問題があります。ボーダーが100％幅の外側に追加されているため、要素が100％の幅と10pxのボーダーを持つことはできません。

サポートするブラウザによっては、CSS3のbox-sizingプロパティを使用することができます。 box-sizing: border-box;を設定すると、ブラウザは指定された幅と高さでボックスをレンダリングし、枠内に枠と詰め物を追加することができます。あなたの問題を解決するはずです。古いブラウザでは限られたサポートに注意してください。

あなたが実際に動的な幅を計算するための新しいCSS3 calc()を使用することができ、より実験的に行きたい場合は、次の

/* Firefox */ 
width: -moz-calc(75% - 100px); 
/* WebKit */ 
width: -webkit-calc(75% - 100px); 
/* Opera */ 
width: -o-calc(75% - 100px); 
/* Standard */ 
width: calc(75% - 100px);