Как два бока (каждый из двух строк) прижать с одной стороне и к другому блоку?

Question

[Алексей]

Но один блок должен быть прижат слева до блока (картинка), другой к правой стороне.Приблизительно как здесь
https://myexpedia.ru/
ПРОБЛЕМА В ТОМ что приуменьшении окна, есть момент когда зеленый блок начинает наезжать на картинку, а потом перескакивает на новую строку (перенос это нормально, наезд конечно нет)
Т.е. нужно сделать или прижат или с новой строки

<div class="nav nav2" style ="color: #82a31d;">
  <p style="font-size: 30px; font-weight: 600; text-decoration: underline;">
    <strong>ДДД ДДД Д ДДД</strong>
  </p>
  <p>
    дддддд ддддддддддд дддддд
  </p>
</div>

<div class="nav">
  <p>
      <strong>дддддддддд ддддддддддд дддддд</strong>
  </p>
  <p>
    <a class="header__phones-city" style="font-size: 30px; font-weight: 600; text-decoration: none;" href="">д ддд ддддддддд
    </a>
  </p>
</div>

.logo img {
  height:90px;
}
.nav {
	display: inline-block; /*Задаем блочно-строчное отображение*/
  	width:290px; /*задаем ширину блока*/
  line-height: normal;
    text-align: center;
  font-family: times new roman, times, serif;
  margin-top: 10px;

        }

 @media all and (min-width: 998px) { 
   .nav2 {
      margin-left: 0px;
      position: relative;
      left: -320px;
    }
}

Comments

[Kovalsky]

ПРОБЛЕМА В ТОМ что приуменьшении окна, есть момент когда зеленый блок начинает наезжать на картинку, а потом перескакивает на новую строку (это нормально)

Так проблема или нормально?

[Алексей]

Никита Полевой, Если переносится то нормально, а если налазит то нет.
То есть или приклеен или переносится.

Answer 1

[Огуречик]

Изначальная структура вёрстки не правильная. Нужно переделывать.
В данной структуре проблема из-за

@media all and (min-width: 998px) { 
   .nav2 {
      margin-left: 0px;
      position: relative;
      left: -320px; /* вот тут проблема, именно поэтому блок и наезжает на картинку, т.к. сдвинут влево */
    }
}

Вот простой пример корректной вёрстки: https://jsfiddle.net/th9qoLvz/

Answer 2

[Legal Adviser]

На сколько я понимаю, проблема при просмотре в мобильной вёрстке, не так ли?
Судя по данному коду:

@media all and (min-width: 998px) { 
   .nav2 {
      margin-left: 0px;
      position: relative;
      left: -320px;
    }

У вас всё время такая проблема будет. На мой взгляд лучше вам воспользоваться CSS flexbox отдельно от вёрстки предназначенной для просмотра на PC. Т.е. лучше сделать отдельный файл для версии моб. устройств.
Полагаю, что ваш <div class="header-content"> лучше сделать в виде Flex-контейнера, в котором будут Flex-элементы. Это вам даст возможность "гибкого макета", при этом наезжать ничего не будет и есть возможность каждому элементу присвоить и значения ширины/длины.
Следовательно, элемент <div class="logo"> у вас возможно будет построить не только, когда он сверху над , но и в целом даст возможность избавиться от лишнего блока <div class="e3lan e3lan-top"> (при просмотре @media only screen and (max-width: 990px) .e3lan-top).

На сайте, который указан вами, при просмотре в режиме моб.устройств всё сползает из-за:

<div id="tr-popup" class="tr-popup" translate="no" data-hidden="true" data-invalid="true" data-disabled="false" lang="ru"><div class="tr-popup__block"><span class="tr-popup__title_original">Оригинальный текст:</span> <span class="tr-popup__value"></span></div><div class="tr-popup__block tr-popup__block_a"><span class="tr-popup__link tr-popup__link_suggest" data-action="expand">Предложить перевод</span><a href="https://translate.yandex.ru" class="tr-popup__link tr-popup__link_service" target="_blank" data-action="navigate"><span class="tr-popup__logo tr-popup__logo_company"></span><span class="tr-popup__logo tr-popup__logo_service"></span></a></div><div class="tr-popup__block tr-popup__block_b"><textarea class="tr-popup__input" spellcheck="false" autocapitalize="off" autocorrect="off" autocomplete="off" maxlength="1000"></textarea><div class="tr-popup__block tr-popup__block_submit"><span role="button" class="tr-popup__button tr-popup__button_submit" data-action="send">Отправить</span></div><div class="tr-popup__overlay tr-popup__overlay_submitted">Спасибо, перевод отправлен</div></div><span role="button" class="tr-popup__button tr-popup__button_close" data-action="clickClose"></span><span role="button" class="tr-popup__button tr-popup__button_menu" data-action="clickMenu"><span class="tr-popup__menu" data-action="disablePopup">Отключить подсказку с оригинальным текстом</span></span><span class="tr-popup__arrow"></span></div>

Стоит её удалить, и всё вроде нормально отображается.