HTML でのブロック要素の動かし方

この中のbox_b3の紫の三つのボックスを、box_b1の赤のボックスの隣に持ってきたいのですが、float:left;を使ってもうまくいきません。どのプロパティを追加すればいいのか教えて欲しいです。

html
1<html lang="ja">
2  <head>
3    <meta charset="UTF-8">
4    <title></title>
5    <link rel="stylesheet" href="task4_a.css">
6  </head>
7  <body>
8    <div class="box_a">
9      <div class="box_a1">
10        <p><span class="title1">すべて</span></p>
11      </div>
12      <div class="box_a2">
13        <p><span class="title2">メンズ</span></p>
14      </div>
15      <div class="box_a3">
16        <p><span class="title3">レディース</span></p>
17      </div>
18      <div class="box_a4">
19        <p><span class="title4">キッズ</span></p>
20      </div>
21
22        <p><span class="title5">ZOZOTOWNからのお知らせ</span></p>
23
24  <div class="box_b">
25      <div class="box_b1"></div>
26      <div class="box_b2"></div>
27    <div class="box_b3">
28          <div class="box_b3_1"></div>
29          <div class="box_b3_2"></div>
30          <div class="box_b3_3"></div>
31    </div>
32  </div>
33
34  </body>
35</html>

css
1.box_a {
2  width: 100%;
3  height: 50px;
4  background-color: grey;
5  float: left;
6}
7.box_a1  {
8  width: 100px;
9  height: 50px;
10  background-color: black;
11  float: left;
12  margin-left: 180px;
13}
14.box_a2 {
15  width: 100px;
16  height: 50px;
17  background-color: red;
18  float: left;
19}
20.box_a3 {
21  width: 100px;
22  height: 50px;
23  background-color: black;
24  float: left;
25}
26.box_a4{
27  width: 100px;
28  height: 50px;
29  background-color: red;
30  float: left;
31}
32
33.title1, .title2, .title4 {
34  color: white;
35  padding-left: 20px;
36}
37.title3 {
38  color: white;
39  padding-left: 12px;
40
41}
42.title5 {
43  float: right;
44  padding-right: 40px;
45}
46.box_b {
47  background-color: silver;
48  width: 100%;
49  float: left;
50}
51.box_b1{
52  background-color: red;
53  height: 300px;
54  width: 150px;
55}
56.box_b2 {
57  background-color: pink;
58  height: 300px;
59  width: 150px;
60  float: left;
61}
62
63.box_b3_1 {
64  background-color: purple;
65  height: 280px;
66  width: 160px;
67  display: inline-block;
68
69}
70
71.box_b3_2 {
72  background-color: purple;
73  height: 280px;
74  width: 160px;
75  display: inline-block;
76}
77
78.box_b3_3 {
79  background-color: purple;
80  height: 280px;
81  width: 160px;
82  display: inline-block;
83}
84

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

回答2件

「position」を使う場合はこんな感じでしょうか？

CSS
1.box_b {
2  background-color: silver;
3  width: 100%;
4  float: left;
5  position: relative; /* ← 追加 */
6}
7
8/* ↓ 追加 */
9.box_b3 { 
10  position: absolute;
11  top: 0;
12  left: 150px;
13}

floatを使う場合は「asuchi0819」さんの回答にもあるように、仕様を再度確認してください。
また、floatにはクリアは必須です。方法はいくつかありますので、検索してみてください。

参考：
回り込みの解除（floatの解除）

投稿2019/09/04 13:29

yoshinavi

総合スコア3523

float は CSS のプロパティで、要素を包含ブロックの左右どちらかの側に沿うように設置し、テキストやインライン要素がその周りを回りこめるように定義します。

MDN

あくまでfloatに上に回り込むと言う機能は付いていません。

やるんだったらこんな感じでは？

HTML
1  <div class="box_b">
2    <div class=left>
3      <div class="box_b1"></div>
4      <div class="box_b2"></div>
5    </div>
6    <div class="box_b3">
7          <div class="box_b3_1"></div>
8          <div class="box_b3_2"></div>
9          <div class="box_b3_3"></div>
10    </div>
11  </div>

CSS
1.left, .box_b2, .box_b3 {
2  display: inline-block;
3}
4
5// 上は加えてください
6
7// 省略
8
9.box_b2 {
10  background-color: pink;
11  height: 300px;
12  width: 150px;
13  // float: left; いらない
14}
15
16// 省略