Верстка 2-х блоков с 100% шириной в контейнере

285

02 января 2018, 14:15

Господа, помогайте, не получается без костылей, сверстать блоки такого типа:

Верстка должна быть адаптивной, не знаю как без костылей (а именно без position: absolute или наезжающих друг на друга блоков) сверстать оранжевый и синий блок в .container, что бы их края были на всю ширину браузера, но при этом контент в этих блоках не выходил за пределы контейнера.

Answer 1

Пример

.bg { 
  background: linear-gradient(to right, rgba(255, 69, 0, 1) 0%, rgba(255, 69, 0, 1) 50%, rgba(0, 0, 255, 1) 50%, rgba(0, 0, 255, 1) 100%); 
} 
 
.bg .container { 
  padding-top: 15px; 
  padding-bottom: 15px; 
  color: #fff; 
  border: 2px solid #000; 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
<div class="bg"> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-xs-6">Left</div> 
      <div class="col-xs-6 text-right">Right</div> 
    </div> 
  </div> 
</div>