テキストコンテンツを折り返す要素をブロックする

Question

私は縦に配置したい、左に揃える2つのdivがあり、テキストの量に基づいてその幅を折り返したい。

fiddle

<div class="main"> 
    <div class="line">Content content content content</div> 
    <div class="line">Content content</div> 
</div> 

.main { 
    position: absolute; 
    color: white; 
} 
.line { 
    padding: 3px; 
    margin: 2px; 
    background-color: #505050; 
} 

私は可能な解決策を思い付いたが、私はこれ以上まっすぐ進むソリューションがあるかどうかを知りたいです。

私が思いついた解決策は、 ".line"の "display：inline-block"、 "white-space：nowrap"を作り、 ".main"を "width：0"にすることでした。

solution fiddle

.main { 
    position: absolute; 
    color: white; 
    width: 0; 
} 
.line { 
    padding: 3px; 
    margin: 2px; 
    background-color: #505050; 
    display: inline-block; 
    white-space: nowrap; 

    /* IE7 fix */ 
    zoom: 1; 
    *display: inline; 
}​ 

このためのより良いオプションがありますか？

「幅：0」と「白い空白」が異なるコンテンツに影響する可能性があるため、より簡単な解決策があるかどうかを尋ねる理由は、

Answer 1

私が理解しているとおり、それはあなたが望むかもしれません。

.main { 
    color: white; 
} 
.line { 
    padding: 3px; 
    margin: 2px; 
    background-color: #505050; 
    float:left; 
    clear:left; 
} 

http://jsfiddle.net/2kmzK/1/