親divは子divと一緒に展開しない

Question

私はこれに多くの質問を見ましたが、どれもそれにposition:absoluteを持っていないようです（おそらく問題ですが、わかりません） いつもテーブルを扱うために、 divの私の最初の試み私は次の問題に遭遇しました。

私の主な問題は、私のchild-divsの1つが（#contentBox）になったときにmain-div（#container）も拡張されていないことです。

あなたはhttp://www.xact.be/consciente/index_v1.htmlを見ている場合のdivが#container-divのmin-height上で展開したらすべてが、うまくあるAlがめちゃくちゃになること、問題のためhttp://www.xact.be/consciente/index_v2.htmlを参照してください。

ない私は、それゆえ、なぜ私はあなたの専門知識を求めています:)

Answer 1

まれに、絶対位置だけを使用してください。 Divを絶対配置すると、ページの通常のフローから除外され、通常の親子関係が中断されます。代わりにposition：相対divと浮動小数点：right。その後、適切なマージンを追加します。また、親divから不要な絶対配置を削除する必要があります。 float、padding、およびmarginだけを使用してdivを配置します。絶対的な配置は、通常の流れの範囲外のものに最適です。

Answer 2

#container{ 
position:relative; 
} 

これは、それを解決する、すべて間違っているかどうか、これをコーディングしていた場合に確認してください！

Answer 3

本当に必要のない多くの要素にposition要素を追加しました。これはビジュアルエディタであなたを助けてくれるかもしれませんが、それらの属性を削除してライブに行くと、必要な場所で作業することがわかります。

HTMLを覚えておくことは、変更を必要としない限り、属性を参照したり値に属性を与える必要はないということを覚えておくことが重要です。

あなたのコードを確認した後、min-height値を正しく使用していないようです。それを削除して自動高さを割り当てると、追加しようとしていたコンテンツに自由に調整できます。

これは、あなたが持っているものです。

#contentBox { 
position:relative; 
float:right; 
width: 575px; 
min-height: 500px; 
padding: 20px; 
text-align: left; 
color: #333333; 
background-color: #fff; 
background-attachment: fixed; 
background-image: url(images/logo_box.png); 
background-repeat: no-repeat; 
background-position: bottom right; 
} 

私が提案する...

が最小の高さを削除：500pxなどを; &位置：相対;

高さ：autoに置き換えてください。

OR 分の高さの増加値を手動：+

500pxなど

#contentBox { 
height: auto; 
float:right; 
width: 575px; 
padding: 20px; 
text-align: left; 
color: #333333; 
background-color: #fff; 
background-attachment: fixed; 
background-image: url(images/logo_box.png); 
background-repeat: no-repeat; 
background-position: bottom right; 
} 

（それらの位置を削除する属性、それは無期限に特定の要素を調整するために見て、その後破るない場合、あなたは、あなたのマージンとパディングを信頼することができ

。

希望このことができます！

Answer 4

#container{ 
    overflow: auto; 
} 

はそれが助けを願っています。