css - DIV を隣り合わせに並べることができません

Question

何らかの理由で、div を隣り合わせに配置できません。「右」は「左」の下に入る コードの何が問題なのですか? HTML :

<div id="activity-container">
    <div id="activity-left">left</div>
    <div id="activity-right">right</div>
</div>

CSS :

#activity-container
{
    width:90%;
    background-color:#FFFF00;
    Height:400px;
    margin-left: auto;
    margin-right: auto;
}

#activity-left {
    border: 1px solid black; 
    color:#000;
    margin: 0 auto; 
    width: 20%; 
    float: left;
    position: relative; 
}

#activity-right {
    border: 1px solid black; 
    margin: 0 auto; 
    color:#000;
    width: 80%; 
    float: left;
    position: relative; 
}

ライブデモ:ティンカービン

Answer 1

div-sの境界線2pxが幅に追加されます。それらを削除すると、隣同士になります-jsFiddle

境界線が本当に必要な場合は、 outlinejsFiddleでそれらを模倣します

#activity-left {
    outline: 1px solid #000;
    color:#000;
    margin: 0 auto; 
    width: 20%; 
    float: left;
    position: relative; 
}

#activity-right {
    outline: 1px solid #000;
    margin: 0 auto; 
    color:#000;
    width: 80%; 
    float: left;
    position: relative; 
}​

Answer 2

境界線を保持したい場合は、次のように変更してみてくださいwidth。

#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}

#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 19%;
float: left;
position: relative;
}

#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}

Jsfiddleをチェック

Answer 3

CSS からfloatとプロパティを削除するだけです。margin

#activity-right
{
    border: 1px solid black;           
    color: #000;
    width: 80%;           
    position: relative;
}

それよりも、あなたの期待どおりに機能します。