Задать вопрос
@zaralX
Я человек, я упал с луны.
html

Как разместить 2 контейнера на разных сторонах?

Всем привет я новичёк в веб дизайне.

И у меня встал как я считаю простой вопрос на который я не смог найти ответа.
Сейчас наглядно обьясню.

Вот что есть:
62c5df9e4a586700376264.png
css
body {
    background-color: rgb(21, 19, 22);
}

.body-container {
    width: 90%;
    background-color: rgb(39, 39, 39);
    border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.2) 0 4px 2px -2px;
	margin: 48px auto;
}

.container-left-menu {
    width: 15%;
    background-color: rgb(255, 0, 0);
    border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.2) 0 4px 2px -2px;
	margin: 48px left;
}

.container-right {
    width: 80%;
    background-color: rgb(30, 255, 0);
    border-radius: 5px;
	box-shadow: rgba(0, 0, 0, 0.2) 0 4px 2px -2px;
	margin: 48px right;
}

HTML
<!DOCTYPE html>
<html>
<head>
  <title>Welcome!</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="body-container">
        <div class="container-left-menu">
            hello
        </div>
        <div class="container-right">
            hi
        </div>
    </div>
</body>
</html>


Я хочу сделать так что бы красная линия находилась слева а красная справа при этом на одном уровне. Если не сложно можете сказать как установить как установить высоту ещё для каждого элемента)

Должно выйти так:
62c5e0bd893e4766786979.png
  • Вопрос задан
  • 171 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
@zaralX Автор вопроса
Я человек, я упал с луны.
и таак.
Если кто-то это ещё найдёт этот вопрос то вот ответ который вышел:

В основном контейнере display:flex
В правом элементе: margin-left: auto
Ответ написан
1 комментарий
1 комментарий
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
для .body-container добавь стиль display: flex;
дальше, думаю, разберешься. ну и погугли подробнее про flex;
Ответ написан
1 комментарий
1 комментарий
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Fullstack Developer под Wordpress
Future Search
от 90 000 до 150 000 ₽
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
CRM Bitrix24 разработчик
World Vision Clinic • Москва
от 170 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Ещё заказы