0

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

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

1
  • Тут могут быть разные решения - в зависимости от того, что у Вас в правом блоке. Но проще всего, имхо, задать блоку с контактами максимальную ширину, равную половине ширины контейнера, и прижать к середине Commented 28 апр. 2020 в 8:33

1 ответ 1

3

Пример

* {
  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>

3
  • Благодарю! Пробовал на flex делать. А в итоге - все оказалось весьма просто.
    – Platon
    Commented 28 апр. 2020 в 10:06
  • а если наоборот, у контерта размер задан, а block-right должен занять все остальное место?
    – splash58
    Commented 28 апр. 2020 в 10:35
  • @splash58 - Приблизительно так jsfiddle.net/cwjm7658/1
    – soledar10
    Commented 28 апр. 2020 в 15:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.