@local30

В чем заключается ошибка этой конструкции сайта?

Попробовал создать конструкцию сайта и столкнулся с проблемой, что aside некорректно отображается:

656ccecf543d2865045617.png

В чем заключается ошибка, из-за которой 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;
}
  • Вопрос задан
  • 151 просмотр
Решения вопроса 1
delphinpro
@delphinpro Куратор тега Вёрстка
frontend developer
Проблема в смешивании флексов и флоатов. Откуда вообще такая идея?
Вот так делается ваша раскладка
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы