DIVと1つの列を別のDIVと揃えることができません

Question

私は左にいくつかのDIVを、右に大きなDIVを持つ列を持つことを試みています。私はフィドルでそれを試し始めました。私のDIVに境界属性を割り当てると、最初の問題が発生します。

HTML：

<div id="container"> 
    <div id="iframe"></div> 
    <div id="tab1"></div> 
</div> 

はCSS：とにかく

#container { 
margin:0; 
background-color:yellow; 
height: 500px; 
width:100%; 
} 
#iframe{ 
width: 85%; 
height: 100%; 
float: right; 
border: 1px solid red; 
} 
#tab1 { 
width: 15%; 
height: 15%; 
float:left; 
border: 1px solid green; 
} 

View on Fiddle

、私が（だから、多分私のアプローチが正しいものではありません...）前方この目的を探しています

アイデア？

Answer 1

あなたの罫線の幅は、要素の幅を拡張しています。指定された幅に罫線を含めるには、要素にbox-sizing: border-box;を追加するだけです。その後、浮動は意図したとおりにする必要があります。

CSS box model on MDNについて詳しく読むことができます（コメント@ tabs1200のヒントのおかげで）。

#container { 
 
    margin: 0; 
 
    background-color: yellow; 
 
    height: 500px; 
 
    width: 100%; 
 
} 
 
#iframe { 
 
    width: 85%; 
 
    height: 100%; 
 
    float: right; 
 
    border: 1px solid red; 
 
    box-sizing: border-box; 
 
} 
 
#tab1 { 
 
    width: 15%; 
 
    height: 15%; 
 
    float: left; 
 
    border: 1px solid green; 
 
    box-sizing: border-box; 
 
}

<div id="container"> 
 
    <div id="iframe"></div> 
 
    <div id="tab1"></div> 
 
</div>

Answer 2

使用ボックスサイジング：ここ

#iframe{ 
    ... 
    box-sizing: border-box; 
} 

#tab1 { 
    ... 
    box-sizing: border-box; 
} 

は実施例です。このコードは動作するはずです：

* { 
    box-sizing: border-box; 
}