私は2つの列のレイアウトを持っていますが、右の列にパディング\ marginを追加したいのですが、内容を画面からずらさないでください。私のイラストでは、矢印は私が余分なスペースをしたい場所を指しています。赤いdivにマージンやパディングを追加すると、赤いdivが画面の右側にプッシュされますが、私はそれを避けたいと思います。これを行うための賢明な方法がありますか？多分ラッパーdivか何か？おかげ画面からコンテンツを押し出さずにマージンを追加するには？
、私はあなたを伝えることができるすべてがある...
あなたはコンテンツがあなたのすべての要素のwidth、その後、画面の外にプッシュされたくない場合 - marginとpaddingを含みます - - 最大100％または最大ピクセル幅を加算する必要があります。 （ピクセルおよびパーセントを混合する際に、頻繁に、あなたはおそらく少ないたい）
ここでは簡単な例です：
<div id="left"></div>
<div id="right"></div>
#left{
border:1px solid red;
width:20%;
height:50px;
margin-right:4%;
float:left;
}
#right{
border:1px solid red;
width:75%;
height:50px;
float:left;
}
助けを感謝し、余白を追加しようとした：4％;左のdivに。助けてくれていないようでした。私はそれが完了する前に、どのようにスケーリングスプリッタがサイズ変更されているかを理解する必要があると思います。 – NullReference
あなたのdivは100pxにの幅であり、あなたは、パディング右追加した場合：20ピクセル、それはあなたがパディング左/右を使用したときの幅は、あなたの幅から120ピクセルなので、マイナスパディング量になります。コードを見ずに
問題を解決するには、他の人が指摘しているように、box modelのために要素の幅からパディングの値を減算する必要があります。ユーザエージェント内の要素サイジングを決定する計算には、埋め込みが考慮されます。
CSS3を使用すると、デフォルトのボックスモデルのレンダリングを回避し、代わりに、完全に指定された幅と高さを称える、内の要素をパディングを含めることを指示することができますbox-sizing属性を追加します：
/*Property without vendor prefixes*/
box-sizing:border-box;
参照してください。この記事：http://www.css3.info/preview/box-sizing/
あるいは、spec自体から：
border-box この要素の指定された幅と高さ（およびそれぞれの最小/最大プロパティ）によって、要素の境界ボックスが決まります。つまり、エレメントに指定されているすべてのパディングまたはボーダーが配置され、この指定された幅と高さ内に描画されます。コンテンツの幅と高さは、指定された 'width'プロパティと 'height'プロパティからそれぞれの辺の境界とパディング幅を引いて計算されます。コンテンツの幅と高さは負ではないため（[CSS21]、10.2節）、この計算は0でフロアされます。
コードを表示してください。 –
私はtelerikのmvcスプリッタを使用して2列レイアウトを生成しています。私はhtmlをアップロードする作業をします。今までのコメントから、私はおそらくパッドを追加した後に赤いdivのサイズを調整するためにjavascriptを使わなければならないと思う。 – NullReference