Как сверстать border, аналогичный комбинации fieldset и legend?

#html #css #bootstrap #адаптивная_верстка

Как сверстать такой border?



Сайт на bootstrap, то есть он не должен сползать.
Сейчас сверстан с помощью legend и fieldset, что не поддерживается в ie8 и ранних
версиях opera.
http://v.testjay.esy.es/
    

Ответы

Ответ 1

Можно так http://jsfiddle.net/rpmv8u9k/ - заголовок абсолютом сделан, минус в том,
что заголовок если увеличиться, он не двигает текст.

Или так http://jsfiddle.net/vnLw754b/ - заголовок через отрицательный margin, текст
двигает, но позиционирование линий зависит от размера падинга у div, если он изменился
нужно менять и отрицательный left/right у линий. Хотя это не проблема, можно падинг
не указывать для div, а указать только для текста внутри.

Если заголовок не меняется, то подойдут оба варианта, если меняется, то второй.