Попробовал создать конструкцию сайта и столкнулся с проблемой, что aside некорректно отображается:
В чем заключается ошибка, из-за которой aside отображается снизу, а не сбоку?
<body>
<header>
header
</header>
<main>
content
</main>
<aside>
aside
</aside>
<footer>
footer
</footer>
<script> src="js/main.js"</script>
</body>
html, body{
margin: 0;
padding: 0
}
body {
margin: 0;
color: #fff;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 70px;
text-align: center;
line-height: 70px;
background: #1a1818;
}
main {
width: 80%;
flex-grow: 1;
background: #333;
}
aside {
float: left;
}
footer {
height: 50px;
flex-shrink: 0;
background: #1a1818;
}