Сделать поле автозаполнения divs

Question

Итак, я пытался выяснить проблему с моими divs здесь; как перевести мой дизайн в фактический макет, и я не имел большой удачи в исследовании или реализации. В прикрепленной ссылке, где вы видите // PORTFOLIO, а затем линию, простирающуюся до края области содержимого, есть красная линия. Прямо сейчас у меня есть как // PORTFOLIO, так и красные линейные divs, заданные для определенной ширины пикселя, но я хочу, чтобы оба divs автоматически устанавливали их ширину (первая автоматически устанавливала свою ширину в зависимости от того, сколько // TITLE занимает второе место, а второе заполняет оставшееся пространство в контейнере), так как у меня будут другие разделы веб-сайта, которые делают то же самое, и не хотят точно измерять для каждой области. Любые предложения приветствуются, большое вам спасибо!

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/