cssでのコーディング時（画像の下にaside要素を持っていきたいが動かない）

前提・実現したいこと

画像の下にaside(right)要素を持ってきたいです。

発生している問題・エラーメッセージ

画像要素にfloatをしてもaside(right)要素が動かないです。
aside(right)要素のところはblogを持ってきたいです。

該当のソースコード

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <header>header</header>
  <div> 
    <nav>left</nav>
    <!-- <main>center</main> -->
    <img src="images/pic.jpg" alt="">
    <aside>right</aside>
  </div>
</body>
</html>

body {
  width: 800px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  border: thin   #ff0000           solid;
}
header {
  height: 50px;
  border: thin   #ff0000           solid;
}
div {
  display: flex;
  flex: 1;
  border: thin   #ff0000           solid;
}
img {
  width: 650px;
  height: 150px;
  border: thin   #ff0000           solid;
}
/* main {
  flex: 1;
  border: thin   #ff0000           solid;
} */
nav {
  width: 150px;
  border: thin   #ff0000           solid;
}
aside {
  width: 200px;
  border: thin   #ff0000           solid;
}

下の画像のようにしたいです。

miyabi_pudding

2020/09/24 11:14

floatは使っていないようなので、質問内容変えた方がいいかと思いますよ。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLが現状のままでやろうとすると複雑なことになります。
下記のように変更すればいいでしょう。

html
1  <header>header</header>
2  <div> 
3    <nav>left</nav>
4    <!-- <main>center</main> -->
5    
6    <aside>
7      <img src="images/pic.jpg" alt="">
8      <div>right</div>
9    </aside>
10</div>