CSSが2つの浮動小数点を並べて浮動させる問題

Question

2つのdivがコンテナdiv内に並んで表示されます。しかし、第2のものは何らかの理由で包み込みます。 2番目のdivのプロモーションは、1番目のdivスライドショーの右下に表示されます。マージンは正しいようですが、これらの2つのdivが並んで表示されるようにします。

私はここでいくつかの提案を試みましたが、動作しません。ここで

はCSSです：ここでは

#top-feature { 
background: red; 
height: 320px; 
width: 897px; 
margin: 11px 0 0 0; 
/*padding: 10px 0 0 10px;*/ 
position: relative; 
text-align: left; 
} 

#slideshow { 
height: 300px; 
width: 548px; 
margin: 0 0 0 0; 
background: blue; 
} 

#promo { 
height: 100px; 
width: 200px; 
margin: 0 0 0 569px; 
background: green; 
} 

はHTMLです：あなたがそれらをサイド・バイ・サイドたい場合は、絶対的なものを、内側のdiv：あなたは、インラインまたは位置をフロートする必要が

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"> 
    <div id="top-feature"> 
     <div id="slideshow"> 
     </div> 
     <div id="promo"> 
     </div> 
    </div> 
</asp:Content> 

Answer 1

。 「通常の」divは、その下に次のコンテンツを表示させるブロックオブジェクトです。

Answer 2

参照

#top-feature { 
    background: red; 
    height: 320px; 
    width: 897px; 
} 

#top-feature div { 
    float: left; 
} 

#slideshow { 
    height: 300px; 
    width: 548px; 
    background: blue; 
} 

#promo { 
    background: green; 
    height: 100px; 
    width: 200px; 
} 

float CSSプロパティを使用します。http://www.jsfiddle.net/K64vZ/

Answer 3

最初に浮くようにしてください、またはあなたも絶対位置を使用することができます。

#slideshow { 
height: 300px; 
width: 548px; 
margin: 0 0 0 0; 
background: blue; 
float: left; 
} 

#promo { 
height: 100px; 
width: 200px; 
margin: 0 0 0 569px; 
background: green; 
float: left; 
} 

次にあなたがいくつかを持って作ります各部門の内容

Answer 4

実際には、これを達成するための特別なスタイリングは必要ありません。デフォルトではCSSのプロパティです。

2つのdivの合計の幅がコンテナdivより大きくないか、または明示的にclearを使用するまで、2つのdivは常に並べて表示されます。最初のdivで次に例を示します。

#outerdiv { 
    width:500px; 
    height:300px; 
} 
#innerdiv1 { 
    width:200px; 
    height:300px; 
    float:left; 
} 
#innerdiv2 { 
    width:300px; 
    height:300px; 
} 

あなたが任意の境界を指定していない場合、これらは並べて表示されますが、あなたが指定したボーダー/パディング/マージンなどを持っている場合は、その後、内側の幅を調整する必要がありますそれに応じてdivs。