2ボックス内のボックス

Question

ボックスの中に2つのボックスを置くことができる有効なCSSを私に提供したいと思います。 画像で私が与えられているよう

CSS

<style type="text/css"> 
      #adbox { 
       width: 602px; 
       height: 250px; 
       border-width: 0; 
       border-color: red; 
      } 
      #adbox .adbox1 { 
       width: 300px; 
       height: 250px; 
       border-width: 0; 
       border-color: red; 
       } 
      #adbox .adbox2 { 
       width: 300px; 
       height: 250px; 
       border-width: 0; 
       border-color: red; 
     } 
    </style> 

HTML

<div align=center><div id="adbox"> 
<div class="adbox1"> 
<img src="foobar1.jpg" border="0" /> 
</div> 
<div class="adbox2"> 
<img src="foobar.jpg" border="0" /> 
</div> 
</div></div> 

Answer 1

私はあなたが提供したイメージのようにボックスを揃えたいと思うでしょう。

あなたはこのCSSでこれを行うことができます。

#adbox { 
    width: 600px; 
    height: 250px; 
    border: 1px red solid; 
} 

#adbox .adbox1, #adbox .adbox2 { 
    width: 300px; 
    height: 250px; 
    float: left; 
    outline: 1px red solid; 
} 

例：http://tinkerbin.com/5MAX3Mt2

Answer 2

Well..You私は....質問をしていませんでした2つのボックスを並べて配置したいと仮定して、私は私の前提に基づいて答えを提供しています。あなたは

またフロートをクリアして「クリア」クラスの使用を注意の側で2つのボックス側を配置したい場合は以下のようにあなたのHTMLとCSSを変更

HTML

<div align=center><div id="adbox"> 
<div class="adbox1"> 
<img src="foobar1.jpg" border="0" /> 
</div> 
<div class="adbox2"> 
<img src="foobar.jpg" border="0" /> 
</div> 
<div class="clear"/> 
</div></div> 

CSS

#adbox { 
      width: 602px; 
      height: 250px; 
      border-width: 0; 
      border-color: red; 
     } 
     #adbox .adbox1 { 
      width: 300px; 
      height: 250px; 
      border-width: 0; 
      border-color: red; 
      float:left; 
      } 
     #adbox .adbox2 { 
      width: 300px; 
      height: 250px; 
      border-width: 0; 
      border-color: red; 
      float:left; 
    } 
    .clear{ 
     clear:both; 
    }