HTMLで作成した要素を横に並べたいです。

Question

前提・実現したいこと

HTML・CSSの超初心者なので、非常に初歩で詰まってしまいました。。
簡単なwebアプリケーションを作ろうとHTMLを記載して、CSSで整形しようとしております。

本来実現したいこと

タイトル1
ボックス ボックス

タイトル2
ボックス ボックス

とするために、CSSでfloat:leftを利用して、
ボックスを横に配置しようとしております。

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

本来実現したいこと

タイトル1
ボックス ボックス

タイトル2
ボックス ボックス

発生している事象

タイトル1
ボックス ボックス タイトル2

ボックス ボックス

意図しない形で、タイトル2が詰められてしまいます。
各ボックスはdivタグで囲っており、別々の要素としていたと思うのですが、
なぜか詰められてしまいます。

質問内容などが伝わりにくい箇所がございましたら、ご指摘いただけますと幸いです。

初心者過ぎて、詰まってしまっているため、おしえていだけると嬉しいです。

スキル

ProgateでHTMLとCSSをなぞって勉強しましたが、
0からサイトを作成するのは初めてです。

Answer 1

下記のようなHTMLで

<h2>タイトル1</h2>
<div class="box">ボックス</div>
<div class="box">ボックス</div>
<h2>タイトル2</h2>
<div class="box">ボックス</div>
<div class="box">ボックス</div>

CSSが下記のようになっているのでしょうか。

.box {
  float: left;
}

float は文字通り、要素が浮いた状態になるので、後の要素が上がってきてしまいます。

いちおう、下記のように次の要素で clear でフロートを解除すれば改行はされます。

.box {
  float: left;
}
h2 {
  clear: left;
}

しかし、マージンが効かないとか、いろいろレイアウトに悪影響を与えます。横並びに float はもう完全に自体遅れです。
代案として、下記のようにインラインブロックにすることをお勧めします。

.box {
  display: inline-block;;
}

Comments

[metal_bat]

ありがとうございます！
やりたきことは、記載のとおりでございます。

思ったとおりに実装がされました！
また、アドバイスいただきましてありがとうございます。