Расположение элементов в html

Засунуть в див эти 3 дива, два правых засунуть в другой див, первому дать display: flex

Самый оптимальный вариант, это использовать Flexbox примерно вот с такой структурой и стилями...

HTML-код:

  

 

 

 

    

 

   HEADER 

   LEFT 

 

    

 

    

 

       

 

         RIGHT 

         RIGHT 

 

    

 

    

 

   FOOTER 

 

 

CSS-код:

 /* Обнуление отступов и границ */ 

 

* { 

   margin: 0; 

   padding: 0; 

   border: none; 

} 

 

/* Главный FLEX-контейнер */ 

 

.flex-container { 

   display: flex; 

   justify-content: space-between; 

   align-content: space-between; 

   flex-wrap: wrap; 

   max-width: 800px; 

   min-width: 400px; 

   aspect-ratio: 4 / 3; 

   padding: 20px; 

   box-sizing: border-box; 

   background-color: #FFF; 

} 

 

/* Необязательные стили цвета, границ и текста */ 

 

.flex-container .header, 

.flex-container .footer, 

.flex-container .left, 

.flex-container .right { 

   display: flex; 

   justify-content: center; 

   align-items: center; 

   box-sizing: border-box; 

   border: 5px solid #F05A50; 

   border-radius: 20px; 

   color: #FAFAFA; 

   font-size: 1.4em; 

   background-color: #383838; 

} 

 

/* Стили верхнего и нижнего блока */ 

 

.flex-container .header, 

.flex-container .footer { 

   width: 100%; 

   height: 20%; 

} 

 

/* Стили элементов в левой колонке */ 

 

.flex-container .left { 

   width: 30%; 

   height: 50%; 

} 

 

/* Стили правой колонки */ 

 

.flex-container .right-container { 

   display: flex; 

   flex-wrap: wrap; 

   gap: 10%; 

   width: 65%; 

} 

 

/* Стили элементов в правой колонке */ 

 

.flex-container .right { 

   width: 100%; 

} 

Отступы сделаны через space-between, gap только для вложенного элемента. Результат будет примерно такой, вроде ничего сложного.

чувак... ты кубики в детстве собирал? а 3-гранную пирамидку не пихал в круглое отверстие? это ж элементарная логика, хтмл тут никаким боком... не твое - иди навоз кидай.