divをセンタリングで横並び

質問

1920px×1080pxのPCで確認しています。

container_main を画面いっぱいにして、
container_a とcontainer_b をセンタリングで横並びにしたいのですが、
container_a とcontainer_b が縦に並んでしまいます。

センタリングで横並びにするにはどのようにすれば良いでしょうか。

#container_main {
width:100%;
height:auto;
}

#container_a {
width:500px;
height:400px;
margin:0 auto 0 auto;

}

#container_b {
width:500px;
height:400px;
margin:0 auto 0 auto;
}

回答No.1

begin96 · ベストアンサー

#container_aと#container_bを囲う1000pxのラッパーを追加してはいかがですか？

#container_wrapper{
width:1000px;
margin:0 auto;
}

さらに#container_a と　#container_b　にはfloat:left;が必要ですね。

floatさせた場合、親となるボックス（#container_wrapper）の高さが思い通りに
ならないことがありますのでclearfixを使うか、簡単に済ませるならoverflow:hiddenを入れるなど。

お礼

すばやい回答ありがとうございます！