divsの自動入力スペースを作成

Question

私はここのdivで問題を見つけようとしています。私のデザインを実際のレイアウトにどのように翻訳するのか、そして私は研究や実装にあまり幸運を祈ることができませんでした。添付されたリンクでは、//ポートフォリオが表示され、コンテンツ領域の端まで伸びる線に赤い線が表示されます。今私は両方のポートフォリオと赤の線のdivを特定のピクセル幅に設定していますが、両方のdivsを自動的に幅を設定することができるようにしたいと思います。 TITLEは取り込み、もう1つはコンテナの残りのスペースを埋める）。同じことをやっているウェブサイトの他のセクションがあり、それぞれのエリアを具体的に測定したくないからです。どんな提案も大歓迎です、ありがとうございます！

Example

Answer 1

を参照してください：http://jsfiddle.net/GmtMK/1/（ブラウザウィンドウの幅を変更）

<div id="columnA"> 
    <div id="title">//Portfolio</div> 
    <div id="line"></div> 
</div> 

#columnA { 
    font-family: 'ProximaNovaRegular', Geneva, sans-serif; 
    font-size: 19px; 
    text-transform: uppercase; 
    color: #C10000; 
    margin-bottom: 20px; 
    letter-spacing: 4pt; 
} 
#title { 
    float: left 
} 
#line { 
    overflow: hidden; 
    height: 9px; 
    border-bottom: 1px solid #c10000; 
} 

Answer 2

まず、それは素晴らしく、スタイリッシュに見える、私はあなたのウェブサイト上であなたを補完してみましょう！ は、第二に、私はdisplay: table CSSプロパティを使用して、あなたのためのソリューションを持っている、しかし、それは<hr />要素を追加する必要があり、それはあなたが不均一な高さのセルを持たせないであろう次のとおりです。

<div id="columnA"> 
    <div id="title">//Portfolio</div> 
    <div id="line"><hr /></div> 
</div> 

#columnA { 
    width: 400px; 
    display:table; 
} 
#title { 
    display:table-cell; 
    width: 175px; 
} 
#line { 
    display:table-cell; 
    width: auto; 
} 
hr { 
    background-color: #C10000; 
    height: 1px; 
    border: 0; 
} 

完全な例を参照してください。http://jsfiddle.net/GmtMK/