Нестандартная верстка с плавающим width

Question

Как сверстать так, чтобы левая сторона с контактами была по сетке, а правая - "навылет" - тоесть до конца экрана и при адаптивности - также шла до конца экрана

Answer 1

Пример

* {
  margin: 0;
  box-sizing: border-box;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 1em;
  border: 1px solid #f00;
}

header {
  background-color: #f7f7f7;
}

.section-custom {
  position: relative;
}

.content {
  padding-right: 50%;
}

.block-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background-color: #555;
}

<header>
  <div class="container">header</div>
</header>

<section class="section-custom">
  <div class="container">
    <div class="content">
      Lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
    </div>
  </div>
  <div class="block-right"></div>
</section>

<section>
  <div class="container">
    content
  </div>
</section>

БЛОГ НА HUSL

Нестандартная верстка с плавающим width

Ответы (1 шт):