CSS-разметка с границами

Question

В настоящее время я работаю на следующем сайте для клиента http://minta.jvsoftware.com/, но я пытаюсь сделать верхнюю и нижнюю границы основного контейнера div, чтобы они выглядели так http://awesomescreenshot.com/0f8jdwn71 в основном делайте границы простирающимися влево до конца экрана (не обращайте внимания на красный цвет, он должен быть того же цвета, что и у меня сейчас).

Я пытался найти решение, но пока что мне не удалось, я готов попробовать решение JS / jQuery, если его реализация с использованием просто css становится слишком сложной.

Кто-нибудь может мне помочь? Заранее спасибо!

Answer 1

Вы можете достичь этого с помощью чистого CSS с отрицательными полями.

Сначала вы должны обновить CSS для .container следующим образом:

.container {
  clear: both;
  font-family: "Times New Roman",Times,serif;
  margin: 124px auto 36px;
  padding: 0;
  width: 940px;
}

Теперь оберните содержимое основного divв другой div и примените несколько CSS, как это:

<div id="main" class="container clearfix" role="main">
    <div style="border: 1px solid red; margin-left: -2000px; padding: 8px 8px 8px 2000px;">
        <div class="content"> ... </div>
        <div class="featured-image"> ... </div>
        <div style="clear:both;"></div>
    </div>
</div>

Вот скриншот, чтобы помочь вам разобраться:

Answer 2

Почему вы не используете «позиция: абсолют»? В этом случае это идеальное решение, я думаю.

<style>
.topborder,
.bottomborder {
  position:absolute;
  left:-100px;
  width:150px;
  height:3px;
  background:#ff0000;
  z-index:999;
}

.topborder {
  top:-3px;
}

.bottomborder {
  bottom:-3px;
}

#main {
  position:relative;
}
</style>

<div id="main" class="container clearfix" role="main">
  <div class="topborder"></div><div class="bottomborder"></div>

  your content

</div>

Answer 3

Чтобы получить желаемую компоновку, я думаю, что вы должны поместить слева рядом с контейнером div, заставить их плавать влево и дать этому div границы сверху и снизу красным цветом