Try instead of absolute positioning to use float:right; :
- Block with
float:right; put first. - To block the title to occupy the entire free width of the screen, assign it
overflow: hidden; . - In order for the product lines not to crumple when meeting with the promo block, you need to either choose the height of the promo block or set
clear:left; through media queries. Media queries take longer to count and recalculate longer, if any size changes in the layout. It is better to choose the height of the promo block.
Option with the calculation of the height of the promo block
This is an example. Under your layout, count the dimensions yourself.
/* чтобы браузер вычислял размеры блоков, включая border и padding внутрь width и height: https://webref.ru/layout/learn-html-css/box-model */ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #commonbackground { /* общий фон */ background-color: #f6f6f6; overflow: hidden; /* заставляем обернуть все плавающие блоки */ width: 100%; } #divcategorydescript { /* картинка с описанием категории */ background: green; height: 100px; overflow: hidden; } #picpromo { /* блок с промо-товаром */ background: orange; float: right; height: 426px; /* = 100px #divcategorydescript height + 2px .forsingleitem margin-top + 236px .divpic height + 88px .divgoodsname height */ width: 290px; } .forsingleitem { /* блок с одним из товаров */ float: left; margin-top: 2px; margin-right: 2px; } .divpic { /* блок изображением товара */ background: #d1d3d4; color: #ececed; font-family: 'Supermolot Light', Arial; font-size: 32px; height: 236px; line-height: 36px; width: 290px; } .divgoodsname { /* блок с названием и ценой товара (белая полоса) */ background: #fff; height: 88px; line-height: 36px; } #divcategorydescript, #picpromo, .divpic, .divgoodsname { /* отступ внутри блока для красоты */ padding: 4px 12px; }
<div id="commonbackground"> <!--Общий большой див для бэкграунда--> <div id="picpromo"> <!--Див для изображения с Промо-товаром--> <img id="promopicture" src="./pics/WakeboardPromoBackground.jpg" alt="Picture"> <div id="promoheader">ЗАГОЛОВОК <br>ПРОМО-ТОВАРА <br><span id="promodescription">Описание промо-товара</span> </div> <div id="promopricedigits">4 540<span id="promopricedigitsrub">руб.</span> </div> <a href="#"> <div id="takepeekcategory">Посмотреть +</div> </a> </div> <div id="divcategorydescript"> <!--Див для картинки с описанием категории--> <img id="categorydescriptpic" src="./pics/bikeincategory.jpg" alt="Pic"> <div id="categorydescript">ОПИСАНИЕ КАТЕГОРИИ <br><span id="shorttextaboutcategory">Краткий текст о категории</span> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> <div class="forsingleitem"> <!--Див для одного товара с описанием и ценой--> <div class="divpic"> <div class="goodspic">Изображение <br>товара</div> <div class="cornerdiv"></div> </div> <div class="divgoodsname"> <div class="goodsnamestr">Название товара</div> <div class="pricedigits">4 540<span class="pricedigitsrub">руб.</span> </div> </div> </div> </div> <!--Конец общего большого дива для бэкграунда-->
