DIVは、高さに設定：自動正しく

Question

ここに私のウェブサイトを閲覧してください表示されない：http://www.budgie.richardcmpage.com/

私のボックスのいずれか（下の青い1）のためのdivのスタイルが調整されていない、それは自動的に高さです。あなたが見ることができるように、ポストは1行より長いので、私はそれを量に自動的に調整したい。私はあなたが見ることができるように並べ替え/折り返し機能を持って、私はちょうどそれが働いていないことがわかるように、背後にある背景が必要です！

#article_box_outer {  
    width: 800px; 
    position: relative; 
    height: auto; 
    border: 1px solid #337aa4; 
    background: #42592c;  
    margin-left:auto; 
    margin-right:auto; 
    margin-bottom:40px; 
    margin-top:10px;  
} 

#article_box_inner{ 
    width: 400px; 
    height: 20px; 
    position: absolute; 
    border-left: 1px solid #337aa4; 
    border-bottom: 1px solid #337aa4; 
    border-right: 1px solid #337aa4; 
    background: #42592c; 
    top: 50px; 
    right: 30px;    
} 

Answer 1

HTML構造のためのフィドルと、同じレイアウトとCSSを得るためのCSSを見てください。

フィドル：http://jsfiddle.net/sH4TQ/1/

デモ：http://jsfiddle.net/sH4TQ/1/embedded/result/

SS：

Answer 2

内側のdivのposition: absolute;のため、外側のdivが期待どおりに動作しません。

このプロパティは、ドキュメントフローからdivを取り出し、その領域を予約しません。位置を削除し、代わりにmargin-top: 50px;を使用してください。

：

Answer 3

Firebugで気にしていたことに気づいたカップルのこと。

1. 最初。なぜあなたはすべてが比較的か絶対的に位置づけられているのか疑問に思っていますか？私はこれがあなたのレイアウトを考えると必要ではないと思います。

テーブルを表示するようにコンテナを設定すると、これが問題を解決するようです。

#article_box_inner {display:table;} 

「の並び替えは、」これに伴う問題は、より多くのコンテンツが追加された場合、それがダウン#article_box_inner

このコンテナをプッシュしていないということであり、それが絶対的に配置されているので、それはです。このレイアウトでは、すべてが絶対位置または相対位置を使用して左に浮かべることができるはずです。