横並びにしたいのにならないです。

コードは合っているはずなのに、横並びにならなくて困っています。

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

float: left と書いているのに横並びにならない

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title>イヤホンジャックの向こう側</title>
6    <meta name="viewport" content="width=device-width">
7    <link rel="stylesheet" href="css/style.css">
8  </head>
9  <body>
10    <div class="container">
11      <header>
12        <h1>COCOA</h1>
13      </header>
14      <div class="content">
15        <section class="information">
16          <h1>イヤホンジャックの向こう側</h1>
17          <p class="type">Album</p>
18          <div class="description">
19            <img src="img/jacket.png"alt="イヤホンジャックの向こう側のジャケット写真">
20            <p>COCOA 4枚目のアルバムとなる今作。ジャケットデザインに色鉛筆画家の「カタヒラシュンジ」氏を迎え、音楽と絵のコラボを実現させた一枚。</p>
21            <p>HONDA CARS 静岡 CMタイアップの「キミのうた」をはじめ、完全書き下ろしの新曲3局を含む全6曲を収録。</br>
22            イヤホンジャックの向こう側に広がる世界を、ぜひご堪能ください。</p>
23          </div>
24        </section>
25        <section class="songs">
26          <h2>収録曲</h2>
27          <ol>
28            <li>C#</li>
29            <li>ワンルームファッションショー</li>
30            <li>ハッピータイム</li>
31            <li>シャンディガフ</li>
32            <li>僕は知らない</li>
33            <li>キミのうた</li>
34          </ol>
35        </section>
36      </div>
37    </div>
38  </body>
39</html>
40

CSS
1body{
2  background-color: #f0f0f0;
3  padding:10px;
4  font-size:14px;
5  color:#666;
6}
7.container{
8  width:800px;
9  margin:0 auto;
10  box-shadow:0 0 10px rgba(0,0,0,.3); 
11}
12header{
13  background-color:#422814;
14  padding:10px;
15  color:#fff
16}
17header h1{
18  margin:0;
19  font-size:24px;
20  font-weight:normal;
21  text-align:center;
22}
23.description{
24  float:left;
25  margin:0 10px 10px 0;
26}
27.information h1{
28  font-size:18px;
29  margin:0 10px 10px 0;
30  float: left;
31}
32.information .type{
33  display:inline;
34  background-color:#e35a4d;
35  padding:3px 5px;
36  font-size:80%;
37  color:#fff;
38}
39.description{
40  clear: left;
41}
42.content{
43  background-color:#fff;
44  padding:20px;
45}
46.songs{
47  margin:0 0 20px;
48}
49.song h2{
50  clear:left;
51  font-size:100%;
52  font-weight:naormal;
53  margin:0;
54  background-color:#E6E4DD;
55  padding:5px 10px;
56}
57.song ol{
58  padding:0;
59  margin:0;
60  list-style:decimal inside;
61}
62.song li{
63  border-bottom:1px solid #ccc;
64  width:50%;
65  float:left;
66  padding:5px 10px;
67}
68

試したこと

補足情報（FW/ツールのバージョンなど）

K_3578

2021/05/11 01:17 編集

ソースコードはMarkDown方式でコードブロック化してご提示ください。書き方が分からない場合は下記質問の回答を参考にしてください。 https://teratail.com/questions/238564 後、何がしたいのか不明なのでHTMLのソースも貼ってください。

sure_syuwa

2021/05/11 01:30

これで大丈夫ですか？まだ問題があるなら教えていただきたいです。

Lhankor_Mhy

2021/05/11 01:41

「イヤホンジャックの向こう側」と「Album」のことですよね？ご提示のコードを試してみましたが、当方では横並びになっているようでした。

Lhankor_Mhy

2021/05/11 01:45

ああ、他にもあるのですね。 .song li の方はなんとなくわかりますが、.information の方はどうしたいのかがわからないです。何と横並びにしたいのですか？

K_3578

2021/05/11 02:37 編集

私の方も提示のコードで横並びになってました。ちょっと気になったのは <p>HONDA CARS 静岡 CMタイアップの「キミのうた」をはじめ、完全書き下ろしの新曲3局を含む全6曲を収録。</br> ↑ですかね。</br>はそもそも<br>がないですし、閉じタグ不要なので font-weight:naormal;←naormalとは？多分normalのtypoだと思うけど

K_3578

2021/05/11 03:32

というか文字コードタグは何の関係があるんだ?

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

回答2件

Floatは不具合を大量に起こしかねない時代遅れの産物なので使うのを辞めよう。

どういう不具合起こすかってのは挙げたらキリがないので自分で調べて見てください。

10分後にはFloatがいかに使いづらい存在かがわかると思います。

と言うわけでfloatの代わりに現在メジャーに使われている手段が
フレックスボックスレイアウトです。

同じ事は出来るので、使いづらいfloat使って不具合頻発するリスクを負うよりは
こっちに総取っ替えした方がコストは安いです。

まぁ詳細に関してはリンクのMDNのリファレンス見てください。

css
1.description{
2  /*float:left;*/
3  display: flex;
4  flex-wrap: nowrap;
5  margin:0 10px 10px 0;
6}

まぁ大体こんな感じでFloatと同じ事が出来る。
（やり方の提示なので全部フレックスレイアウトにはしてない）

投稿2021/05/11 03:31

編集2021/05/11 03:33

K_3578

総合スコア1282

どうしたいのかがわからないので、推測で回答します。

css
1/* .description{ */
2.description img{
3  float:left;
4  margin:0 10px 10px 0;
5}
6
7/* .song h2{ */
8.songs h2{
9  clear:left;
10  font-size:100%;
11  font-weight:naormal;
12  margin:0;
13  background-color:#E6E4DD;
14  padding:5px 10px;
15}
16
17/* .song ol{ */
18.songs ol{
19  padding:0;
20  margin:0;
21  list-style:decimal inside;
22}
23
24/* .song li{ */
25.songs li{
26  border-bottom:1px solid #ccc;
27  width:50%;
28  float:left;
29  padding:5px 10px;
30  box-sizing: border-box; /* 追加 */
31}