При создании div боковое меню сдвигается, что делать?

CSS HTML PHP

4 марта 2026 1 ответ

При создании div боковое меню сдвигается вот скрин:

вот index.html

{% extends 'main/layout.html' %}  {% block content %}     &lt;div class="features" align="center" &gt;         &lt;h1&gt;test2&lt;/h1&gt;         &lt;p&gt;Lratione, temporibus!&lt;/p&gt;         &lt;button class="btn btn-warning"&gt;test&lt;/button&gt;     &lt;/div&gt; {% endblock %}

{% extends 'main/layout.html' %} {% block content %} <div class="features" align="center" > <h1>test2</h1> <p>Lratione, temporibus!</p> <button class="btn btn-warning">test</button> </div> {% endblock %}

вот main.css

body {     background: #a6fa52fa; }   aside {     float: left;     background: #5c8a21fa;     width: 17%;     padding: 2.5%;     height: 100vh;     color: #fff;     border-right: 5px solid #4d4d4d;  } aside img {     width: 65%;     float: left;     position: relative;     left: -40px;     top: -30px; }  aside ul {list-style: none} aside ul li {     color: #fff;     display: block;     margin-top: 20px;     transition: all .6s ease;     } aside ul li, aside ul a {text-decoration: none;} aside ul li:hover, aside ul a:hover {     color: #eb5959;     text-decoration: none;     transform: scale(1.05); }

body { background: #a6fa52fa; } aside { float: left; background: #5c8a21fa; width: 17%; padding: 2.5%; height: 100vh; color: #fff; border-right: 5px solid #4d4d4d; } aside img { width: 65%; float: left; position: relative; left: -40px; top: -30px; } aside ul {list-style: none} aside ul li { color: #fff; display: block; margin-top: 20px; transition: all .6s ease; } aside ul li, aside ul a {text-decoration: none;} aside ul li:hover, aside ul a:hover { color: #eb5959; text-decoration: none; transform: scale(1.05); }

Ответ так и не был найден просьба помочь!

Дополнительно:

Я решил!!!

Кому интересно:

body {     background: #a6fa52fa;  }   aside {     float: left;     background: #5c8a21fa;     width: 17%;     padding: 2.5%;     height: 100vh;     color: #fff;     border-right: 5px solid #4d4d4d;     top: 0  } aside img {      width: 65%;     float: left;     position: relative;     left: -40px;     top: -30px; }  aside ul {list-style: none} aside ul li {     color: #fff;     display: block;     margin-top: 20px;     transition: all .6s ease;     } aside ul li, aside ul a {text-decoration: none;} aside ul li:hover, aside ul a:hover {     color: #eb5959;     text-decoration: none;     transform: scale(1.05); } .features {     margin-left: 100em;  } .box {     position: fixed; }

body { background: #a6fa52fa; } aside { float: left; background: #5c8a21fa; width: 17%; padding: 2.5%; height: 100vh; color: #fff; border-right: 5px solid #4d4d4d; top: 0 } aside img { width: 65%; float: left; position: relative; left: -40px; top: -30px; } aside ul {list-style: none} aside ul li { color: #fff; display: block; margin-top: 20px; transition: all .6s ease; } aside ul li, aside ul a {text-decoration: none;} aside ul li:hover, aside ul a:hover { color: #eb5959; text-decoration: none; transform: scale(1.05); } .features { margin-left: 100em; } .box { position: fixed; }

Ответы:

Проблема в float

Как вариант можно использовать flexboxили grid

body {   display: flex;   margin: 0; }  aside {   background: #5c8a21fa;   width: 17%;   padding: 2.5%;   height: 100vh;   color: #fff;   border-right: 5px solid #4d4d4d; }  aside img {   width: 65%;   align-self: center;   margin-bottom: 20px; }  aside ul {   list-style: none;   padding: 0; }  aside ul li {   color: #fff;   margin-top: 20px;   transition: all 0.6s ease; }  aside ul li, aside ul a {   text-decoration: none; }  aside ul li:hover, aside ul a:hover {   color: #eb5959;   text-decoration: none;   transform: scale(1.05); }  .content {   flex: 1;   background: #a6fa52fa;   padding: 2.5%; }

body { display: flex; margin: 0; } aside { background: #5c8a21fa; width: 17%; padding: 2.5%; height: 100vh; color: #fff; border-right: 5px solid #4d4d4d; } aside img { width: 65%; align-self: center; margin-bottom: 20px; } aside ul { list-style: none; padding: 0; } aside ul li { color: #fff; margin-top: 20px; transition: all 0.6s ease; } aside ul li, aside ul a { text-decoration: none; } aside ul li:hover, aside ul a:hover { color: #eb5959; text-decoration: none; transform: scale(1.05); } .content { flex: 1; background: #a6fa52fa; padding: 2.5%; }

Когда работаете с float, вам нужно использовать clear fix

body {   background: #a6fa52fa; }  aside {   float: left;   background: #5c8a21fa;   width: 17%;   padding: 2.5%;   height: 100vh;   color: #fff;   border-right: 5px solid #4d4d4d; }  aside::after {   content: "";   display: table;   clear: both; }  aside img {   width: 65%;   float: left;   position: relative;   left: -40px;   top: -30px; }  aside ul {   list-style: none; }  aside ul li {   color: #fff;   display: block;   margin-top: 20px;   transition: all .6s ease; }  aside ul li, aside ul a {   text-decoration: none; }  aside ul li:hover, aside ul a:hover {   color: #eb5959;   text-decoration: none;   transform: scale(1.05); }

body { background: #a6fa52fa; } aside { float: left; background: #5c8a21fa; width: 17%; padding: 2.5%; height: 100vh; color: #fff; border-right: 5px solid #4d4d4d; } aside::after { content: ""; display: table; clear: both; } aside img { width: 65%; float: left; position: relative; left: -40px; top: -30px; } aside ul { list-style: none; } aside ul li { color: #fff; display: block; margin-top: 20px; transition: all .6s ease; } aside ul li, aside ul a { text-decoration: none; } aside ul li:hover, aside ul a:hover { color: #eb5959; text-decoration: none; transform: scale(1.05); }

Сейчас дело обстоит как то так:
vasok1236, это flex или clear fix ?
Sergey, оба не работают.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Игорь Волков Ответ

19 марта 2026 в 05:08

Для решения проблемы с сдвигом бокового меню при создании div элементов, можно использовать различные подходы. Вот несколько возможных способов:

1. Использование CSS свойства overflow: hidden; для родительского элемента бокового меню. Это позволит скрыть часть контента, который выходит за пределы родительского элемента и предотвратит сдвиг бокового меню.

```html

.sidebar {
overflow: hidden;
}

```

2. Задание фиксированной ширины для бокового меню. Это позволит избежать сдвига при добавлении новых элементов в контенте.

```html

.sidebar {
width: 250px; /* Задаем фиксированную ширину бокового меню */
}

```

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

```html

.sidebar {
position: fixed; /* Задаем фиксированную позицию для бокового меню */
width: 250px; /* Задаем ширину бокового меню */
}
.content {
margin-left: 250px; /* Устанавливаем отступ слева для контента, чтобы избежать перекрытия с боковым меню */
}

```

4. Использование флексбоксов или сеток CSS. Эти методы позволяют легко управлять распределением элементов на странице и избежать сдвига бокового меню.

```html

.container {
display: flex;
}
.sidebar {
flex: 0 0 250px; /* Задаем фиксированную ширину бокового меню */
}
.content {
flex: 1; /* Занимаем все доступное пространство */
}

```

Выберите подход, который лучше всего подходит для вашего дизайна и требований, и примените соответствующие стили к вашему коду HTML и CSS. Не забудьте проверить результат в разных браузерах, чтобы убедиться, что боковое меню корректно отображается на всех устройствах.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

Веб-разработка Какие особенности разработки сайтов под тор/даркнет? 1 ответ Веб-разработка Как поправить этот код чтобы можно было обновить данные в бд( при взаимодействии с методом класса в Node.js)? 2 ответов Android Как заменить класс AuthorizationCodeInstalledApp на Android (Google API)? 1 ответ Google Как подтвердить аккаунт Google? 1 ответ

При создании div боковое меню сдвигается, что делать?

Дополнительно:

Ответы:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно