Картинка в нахлест прямоугольника с текстом

Question

Хочу сделать на страничке (HTML+CSS) так, как показано на рисунке, не знаю в какую сторону копать. Попытался поиграться с margin.

.div-grey {
  background-color: #f1f1f1;
  width: 50%;
  height: 100%;
  margin-left: 500px;
}

.div-img {
  float: left;
  margin-top: 15px;
}

#content2-div1 {
  width: 1000px;
  height: 245px;
}

.content2 img {
  height: 50%;
}

.content2 h1 {
  padding-left: 15px;
}

<div id="content2-div1">
  <div class="div-img">
    <img src="img/google_yandex_search.png" alt="">
  </div>
  <div class="div-grey">
    <h1>Text</h1>
  </div>
</div>

Получилось так:

На сколько верно сделано, возможно есть другие способы?

Answer 1

Если я вас правильно понимаю, то вот как вариант:

* {
  margin: 0;
  padding: 0;
}

.block__right {
  position: relative;
  float: right;
  width: 50%;
  margin: 20px 20px 0 0;
  background-color: lightgray;
}

.right {
  margin: 50px 50px 50px 20%;
}

.window {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: -90%;
  margin-right: 50px;
  width: 100%;
  background-color: white;
  box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.3);
}

h1 {
  margin: 0;
  padding: 0 0 20px 0;
  color: deepskyblue;
}

<div class="block__right">
  <div class="right">
    <h1>Заголовок</h1>
    <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p>
  </div>
  <div class="window">Окно</div>
</div>

БЛОГ НА HUSL

Картинка в нахлест прямоугольника с текстом

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