Проблема с border-right

[postoianniy]

Добрый день!

 

Столкнулся с проблемой в CSS, надеюсь на вашу помощь!

 

Имеем код CSS:

#cols {    clear: both;    margin: 0 0 40px;    border-bottom: 1px dashed #ddd;    background: url(../files/images/shade.png) no-repeat center bottom;}.col {    float: left;    width: 239px;    margin: 0 25px 0 0;    padding: 0 15px 15px 0;    border-right: 1px solid #ddd;}.col.last {    margin-right: 0;    border: 0;    padding-right: 0;}

 

Имеем код HTML:

<div id="cols">  <div class="col">    <h2 style='font-variant:small-caps;'><img src="./files/images/arrow.png"> быстро</h2>    <p>текст текст текст текст текст текст текст текст текст текст текст текст </p>  </div>  <div class="col">    <h2 style='font-variant:small-caps;'><img src="./files/images/arrow.png"> официально</h2>    <p>текст текст текст текст текст текст текст текст текст текст текст текст текст тексттекст текст текст текст текст текст текст текст  </p>  </div>  <div class="col last">    <h2 style='font-variant:small-caps;'><img src="./files/images/arrow.png"> надёжно</h2>    <p>текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст </p>  </div>        <div class="clear"></div></div>

 

Имеем наглядную проблему:

 

Если текст одинаков по длинне, то border-right не доходит до самого конца и всё нормально, а стоит поменять текст в каком-нибудь месте на более длинный, то border-right доходит до конца как на скриншоте. Как сделать так, что бы вне зависимости от длинны текста border-right был как на скриншоте после первой колонки, то есть не до конца?

 

Спасибо!

[klierik]

прочитай рекомендации для оформления вопроса в подписи

 

по теме: как вариант использовать :after с фиксированной высотой

[npofopr]

Или таблицу использовать, в любом ее виде. Есть вариант еще с помощью js выравнять блоки: equal height

[klierik]

таблица сработала бы если нужна синхронищация колонок. но ТС говорит о том что бы бордер был всегда длиной как в колонке 1, не зависимо от кол-ва контента.

[postoianniy]

прочитай рекомендации для оформления вопроса в подписи по теме: как вариант использовать :after с фиксированной высотой

а можно на примере кода?

 

таблица сработала бы если нужна синхронищация колонок. но ТС говорит о том что бы бордер был всегда длиной как в колонке 1, не зависимо от кол-ва контента.

верно!

[klierik]

а можно на примере кода?

 

http://jsfiddle.net/pFu8m/

[postoianniy]

спасибо!