【HTML・CSS】画面を縮小するとfloatしたものが、下段に落ちるのを防ぎたい

###前提・実現したいこと
HTML・CSS初心者です。
画面を縮小すると、floatで横並びにしたものが、下段に落ちてしまいます。
レイアウトを崩さず、横にスクロールする形にしたいです。

###発生している問題・エラーメッセージ
具体的には、ロゴimgの横にメニューliを並べたいです。

＜全画面表示のとき＞
横並びになってる

⇩
＜画面半分に縮小したとき＞
下段に落ちる

###該当のソースコード

<div class="boxA">
  <div class="box1">
      <h1 class="pocari"><img src="img/pocari.jpg" alt="" height="52px" width="86px"></h1>
  </div>

  <div class="box2">
      <ul>
      	<li><a href="#">リスト</a></li>
      	<li><a href="#">リスト</a></li>
      	<li><a href="#">リスト</a></li>
        <li><a href="#">リスト</a></li>
        <li><a href="#">リスト</a></li>
      </ul>
  </div>
  </div>

.boxA {
  border: solid 1px red;
}
.boxA:after {
  content: "";
  display: block;
  clear: both;
  overflow: hidden;
}
.box1 {
  border: solid 1px blue;
  height: 100px;
  width: 100px;
  float: left;
}
.box2 {
  border: solid 1px green;
  background-color: pink;
  height: 100px;
  width: 900px;
  float: left;
}
ul li {
  display: inline-block;
}

###試したこと
２つの要素を囲むboxAにoverflow: hidden;をかけてみましたが、解決できませんでした。

###補足情報
初歩的な質問で申し訳ありませんが、解決策や、コード等を教えていただけるととても助かります。
どうか、よろしくお願い致します。

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

回答3件

以下のように行うのはいかがでしょうか？
横スクロール

HTML
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>タイトル</title>
6    <style type="text/css">
7        * {
8            margin: 0;
9            padding: 0;
10        }
11
12        .boxA {
13            width: 1004px;
14            border: solid 1px red;
15        }
16
17        .boxA:after {
18            content: "";
19            display: block;
20            clear: both;
21            overflow: hidden;
22        }
23
24        .box1 {
25            border: solid 1px green;
26            height: 100px;
27            width: 100px;
28            float: left;
29        }
30
31        .box2 {
32            border: solid 1px green;
33            background-color: pink;
34            height: 100px;
35            width: 900px;
36            float: left;
37        }
38
39        ul li {
40            display: inline-block;
41        }
42    </style>
43</head>
44<body>
45<div class="boxA">
46    <div class="box1">
47        <h1 class="pocari">
48            <img src="https://placehold.jp/3d4070/ffffff/86x52.png?text=image" alt="" height="52px" width="86px">
49        </h1>
50    </div>
51
52    <div class="box2">
53        <ul>
54            <li><a href="#">リスト</a></li>
55            <li><a href="#">リスト</a></li>
56            <li><a href="#">リスト</a></li>
57            <li><a href="#">リスト</a></li>
58            <li><a href="#">リスト</a></li>
59        </ul>
60    </div>
61</div>
62</body>
63</html>

可変

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイトル</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            display: inline-block;
        }

        img {
            width: 100%;
            height: 100%;
            max-width: 100px;
            max-height: 100px;
        }

        .boxA {
            width: 100%;
            border: solid 1px red;
        }

        .boxA:after {
            content: "";
            display: block;
            clear: both;
            overflow: hidden;
        }

        .box1 {
            border: solid 1px green;
            height: 100px;
            width: calc(10% - 2px);
            float: left;
        }

        .box2 {
            border: solid 1px green;
            background-color: pink;
            height: 100px;
            width: calc(90% - 2px);
            float: left;
        }
    </style>
</head>
<body>
<div class="boxA">
    <div class="box1">
        <h1 class="pocari">
            <img src="https://placehold.jp/3d4070/ffffff/86x52.png?text=image" alt="" height="52px" width="86px">
        </h1>
    </div>

    <div class="box2">
        <ul>
            <li><a href="#">リスト</a></li>
            <li><a href="#">リスト</a></li>
            <li><a href="#">リスト</a></li>
            <li><a href="#">リスト</a></li>
            <li><a href="#">リスト</a></li>
        </ul>
    </div>
</div>
</body>
</html>

投稿2017/03/19 15:46

編集2017/03/19 15:54