[解決済み] 2つのdivを横に並べて配置する [重複] [重複

質問

小さな問題があります。CSS を使って 2 つの div を横に並べようとしていますが、中央の div を水平にページの中央に配置したいのです。

#page-wrap { margin 0 auto; }

これで問題なく動作しています。2番目のdivは、中央のページラップの左側に配置したいのですが、floatを使用してこれを行うことはできませんが、それは可能であると確信しています。

赤いdivを白いdivと並べて押し上げたいのですが、どうすればいいですか？

以下は、この2つのdivに関する私の現在のCSSです。sidebarは赤いdivで、page-wrapは白いdivです。

#sidebar {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap {
    margin: 0 auto;
    width: 600px;
    background: #ffffff;
    height: 400px;
}

解決方法は？

このように、divをラップすると。

<div id="main">
  <div id="sidebar"></div>
  <div id="page-wrap"></div>
</div>

このスタイリングが使える

#main { 
    width: 800px;
    margin: 0 auto;
}
#sidebar    {
    width: 200px;
    height: 400px;
    background: red;
    float: left;
}

#page-wrap  {
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin-left: 200px;
}

しかし、これは少し違う外観なので、あなたが求めているものであるかどうかはわかりません。 この場合、すべての 800px をユニットとしてではなく 600px を中心とした 200px を左側に配置します。 基本的なアプローチは、サイドバーは左に浮きますが、メインdivの中にあり #page-wrap は、サイドバーの幅を左マージンとして、その分移動します。

コメントを元に更新しました。 このオフセンタールックには、こうすればいいんです。

<div id="page-wrap">
  <div id="sidebar"></div>
</div>

このスタイリングで

#sidebar    {
    position: absolute;
    left: -200px;
    width: 200px;
    height: 400px;
    background: red;    
}

#page-wrap  {
    position: relative;
    width: 600px;
    background: #ffffff;
    height: 400px;
    margin: 0 auto;
}