Сделать aside и article в один ряд

@sergeigorbatenk · Регистрация: 01.01.2017

Студворк — интернет-сервис помощи студентам

Вообщем только учусь создавать сайты.
Создал шапку футер и aside, article
Сделал так чтобы aside, article были в один ряд и прописал float: left; для шапки и футера чтобы они не накладывались на блоки.
Но они все в ряд.
Скажите что сделал не так?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href = "style.css" rel="stylesheet" type ="text/css"/>
</head>
    <header >Шапка</header>
    <article ></article>
    <aside ></aside>
    <footer >Футер</footer>
 
 
</html>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body {
    background-color:#36A792;
    
    
}
header {
    border-bottom: 2px solid silver;
    height: 50px;
    width: calc (100% - 20%);
    background-color: #fff;
    padding: 10px;
    
    font-size: 20px;
    float: left;
    box-sizing:border-box;
}
 
 
 
aside, article {
    height:400px;
    float: left;
    border: 1px solid silver;
    background-color: #fff;
    border-radius: 10px;
    margin-top:10px;
    
    box-sizing: border-box;
    float: left;
}
aside {
    width: 30%;
    
    
}
article {
    width: 60%;
    margin-left: 5px;
    margin-right: 5px;
}
footer {
    border-top: 1px solid silver;
    height: 30px;
    width: calc (100%-20%);
    background-color: #fff;
    padding: 10px;
    font-size: 10px;
    
    float: left;
    margin-top: 10px;
}

@thedude · 01.01.2017, 22:30

Ну у вас получается такая ситуация, что блоки обтекают друг друга. Запретите обтекание у article и футера, юзайте свойство clear, . А еще правильнее - уберите float у хедера и футер, зачем он вообще там нужен, блоки по умолчанию выровнены с левой стороны экрана.

Добавлено через 4 часа 1 минуту
Правильнее будет "с левой стороны контейнера"
Clear https://webref.ru/css/clear

@mrtoxas · 01.01.2017, 23:30

sergeigorbatenk, в дополнение к вышесказанному, не ставьте пробел между calc и скобкой. И разделяйте пробелами математические операторы:

CSS
1
2
width: calc (100%-20%); /* Не правильно */
width: calc(100% - 20%); /* Правильно */

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@thedude 36 / 37 / 23 Регистрация: 31.05.2014 Сообщений: 131
	01.01.2017, 22:30
	Ну у вас получается такая ситуация, что блоки обтекают друг друга. Запретите обтекание у article и футера, юзайте свойство clear, . А еще правильнее - уберите float у хедера и футер, зачем он вообще там нужен, блоки по умолчанию выровнены с левой стороны экрана. Добавлено через 4 часа 1 минуту Правильнее будет "с левой стороны контейнера" Clear https://webref.ru/css/clear 0