css - CSSで2つのdivを並べて配置するにはどうすればよいですか？

Question

2つのdivを並べて配置したいのですが、何をしても、2番目のdivは常に最初のdivの下のどこかになります。私が試してみました：

div.one {
width:50%;
float:left;
}

div.two {
width:50%
float:right;
margin-left:50%;
}

と

div.one {
width:50%;
display:inline-block;
}

div.two {
width:50%;
display:inline-block;
}

Answer 1

最初の例から、マージンを削除してみてください。

div.one {
   width:50%;
   float:left;
}

div.two {
    width:50%
    float: left;
}

Answer 2

#div-1a {
position:absolute;
top:0;
right:0;
width:200px;
}
#div-1b {
position:absolute;
top:0;
left:0;
width:200px;
}

これは、ポジショニングのいくつかの例を提供する素晴らしいチュートリアルへのリンクです: http://www.barelyfitz.com/screencast/html-training/css/positioning

Answer 3

どちらも「float:left;」にする必要があります。

要素は収まる必要があります - ボーダー、マージン、またはパディングがある場合、「幅:50%;」高すぎるかもしれません。

Answer 4

.one {
    width: 50%;
    float: left;
    background: green;
    height: 100px;
}

.two {
    width: 50%;
    float: right;
    height: 100px;
    background: red;
}

http://jsfiddle.net/qf9GD/