要素を横並びにしたい

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Dental Clinic</title>
7  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
8  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
9  <link rel="stylesheet" href="main.css">
10  <link rel="stylesheet" href="resposive.css">
11</head>
12<body>
13  <header>
14    <div class="container">
15      <div class="header-left">
16        <img src="https://haniwaman.com/sample/part3/template_08/common/images/siteTitle.png" alt="クリニックの画像">
17      </div>
18      <div class="header-right" >
19        <p>”地域に根付いた歯科医院”デンタル クリニック</p>
20        <h4><i class="fa fa-phone" aria-hidden="true"></i>03-0000-0000</h4>
21        <p class="reception-time">予約受付時間&nbsp;10:00~19:30&nbsp;<span class="red">日祝</span>&nbsp;<span class="red">休診</span></p>
22      </div>
23      <div class="nav">
24        <a class="first" href="./index.html">トップページ<br><span class="english">HOME</span></a>
25        <a href="./clinic.html">医院紹介<br><span class="english">CLINIC</span></a>
26        <a href="./service.html">診療案内<br><span class="english">SERVICE</span></a>
27        <a href="./staff.html">院長・スタッフ紹介<br><span class="english">STAFF</span></a>
28        <a class="last" href="./access.html">アクセス<br><span class="english">ACCESS</span></a>
29      </div>
30    </div>
31  </header>
32  
33  <div class="main-wrapper">
34    <div class="container">
35      <div class="main-image">
36          <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="サンプルです">
37      </div>
38      <div class="information">
39        <h6>新着情報</h6>
40        <div class="info">
41          <div class="date">
42            <p>2012年08月01日</p>
43          </div>
44          <div class="content">
45            <p>診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
46          </div>
47        </div>
48        <div class="info">
49          <div class="date">
50            <p>2012年07月24日</p>
51          </div>
52          <div class="content">
53            <p>【8月の休診のお知らせ】8月12日～16日の間は休診とさせていただきます。何卒よろしくお願いいたします。</p>
54          </div>
55        </div>
56        <div class="info">
57          <div class="date">
58            <p>2012年07月02日</p>
59          </div>
60          <div class="content">
61            <p>【こどもデンタル教室のご案内】毎月第2土曜日に行っているこどもデンタル教室では、参加してくださるお子様を募集しております。。</p>
62          </div>
63        </div>
64        <div class="info">
65          <div class="date">
66            <p>2012年06月20日</p>
67          </div>
68          <div class="content">
69            <p>【7月休診日のお知らせ】7月は土日祝日以外の休診日はありません。ご来院お待ちしております。</p>
70          </div>
71        </div>
72        <div class="info">
73          <div class="date">
74            <p>2012年06月01日</p>
75          </div>
76          <div class="content">
77            <p>ホームページをリニューアルしました。</p>
78          </div>
79        </div>
80      </div>
81      <div class="sideber">
82        <div class="sideber-top">
83            <h6>一般歯科</h6>
84            <a href="#"><i class="fas fa-caret-down"></i>虫歯治療</a>
85            <a href="#"><i class="fas fa-caret-down"></i>歯周病治療</a>
86            <a href="#"><i class="fas fa-caret-down"></i>入れ歯</a>
87            <a href="#"><i class="fas fa-caret-down"></i>予防歯科</a>
88        </div>
89        <div class="sideber-buttom">
90          <h6>審美歯科</h6>
91            <a href="#"><i class="fas fa-caret-down"></i>ホワイトニング</a>
92            <a href="#"><i class="fas fa-caret-down"></i>オールセラミック</a>
93            <a href="#"><i class="fas fa-caret-down"></i>セラミックインレー</a>
94            <a href="#"><i class="fas fa-caret-down"></i>PMTC</a>
95        </div>
96      </div>
97    </div>
98  </div>
99  <footer>
100    <div class="container">
101      <div class="footer-nav">
102        <i class="far fa-circle"></i><a href="./index.html">トップページ</a>
103        <i class="far fa-circle"></i><a href="./clinic.html">医院紹介</a>
104        <i class="far fa-circle"></i><a id="return" href="./service.html">診療案内</a>
105        <i class="far fa-circle"></i><a href="./staff.html">院長・スタッフ紹介</a>
106        <i class="far fa-circle"></i><a href="./access.html">アクセス</a>
107      </div>
108      <p class="tel"><span class="name">デンタル クリニック</span> 東京都新宿区市谷左内町21-13 TEL:03-0000-0000</p>
109      <p class="copyright">Copyright 2012 Dental Clinic CO.,LTD All Rights Reserved.</p>
110    </div>
111  </footer>
112</body>
113</html>
114

css
1body {
2  background-color: #f1f0f0;
3  border-top: 8px solid #71C9C7;
4  margin: 0 auto;
5}
6
7* {
8  -webkit-box-sizing: border-box;
9          box-sizing: border-box;
10}
11
12header {
13  margin: 0 auto;
14  width: 920px;
15  display: -webkit-box;
16  display: -ms-flexbox;
17  display: flex;
18}
19
20.container {
21  padding: 0;
22  margin: 0 auto;
23}
24
25.header-left {
26  padding-top: 60px;
27  float: left;
28}
29
30.header-right {
31  padding-top: 40px;
32  float: right;
33}
34
35.header-right p {
36  font-size: 10px;
37}
38
39.fa-phone {
40  font-size: 20px;
41  padding-right: 8px;
42}
43
44.reception-time {
45  border: 1px solid gray;
46  text-align: center;
47  padding: 5px;
48}
49
50.red {
51  color: red;
52}
53
54.nav {
55  clear: both;
56  border-radius: 0.5em;
57  font-weight: bold;
58  margin-bottom: 30px;
59}
60
61.nav a {
62  background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
63  background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
64  border-left: 1px solid #99E1DF;
65  border-right: 1px solid #71C9C7;
66  padding: 15px 0;
67  text-align: center;
68  color: white;
69  text-decoration: none;
70  width: 20%;
71  line-height: 20px;
72  font-size: 14px;
73}
74
75.nav a:hover {
76  background-image: -webkit-gradient(linear, left top, left bottom, from(#6cc6c4), to(#9ce3e1));
77  background-image: linear-gradient(#6cc6c4 0%, #9ce3e1 100%);
78  opacity: 0.7;
79}
80
81.first {
82  border-top-left-radius: 0.5em;
83  border-bottom-left-radius: 0.5em;
84}
85
86.last {
87  border-top-right-radius: 0.5em;
88  border-bottom-right-radius: 0.5em;
89}
90
91.english {
92  font-size: 12px;
93}
94
95.main-image {
96  max-width: 100%;
97  float: right;
98}
99
100.main-wrapper {
101  width: 920px;
102  margin: 0 auto;
103  text-align: left;
104  display: table;
105}
106
107.sideber {
108  width: 260px;
109  margin-right: 20px;
110  float: left;
111}
112
113.sideber-top {
114  width: 100%;
115  height: 250px;
116  margin-right: 20px;
117  border: 2px solid #71C9C7;
118  border-top-right-radius: 0.5em;
119  border-top-left-radius: 0.5em;
120  background-color: white;
121}
122
123.sideber-top h6 {
124  background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
125  background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
126  padding: 15px 15px;
127  font-weight: bold;
128  color: white;
129  border-top-left-radius: 0.4em;
130  border-top-right-radius: 0.4em;
131}
132
133.sideber-top a {
134  display: block;
135  color: black;
136  text-decoration: none;
137  margin: 18px;
138  font-size: 14px;
139  font-weight: bold;
140  border-bottom: 1px solid #71C9C7;
141  padding-bottom: 5px;
142}
143
144.sideber-top a:hover {
145  color: #71C9C7;
146}
147
148.fa-caret-down {
149  padding-right: 5px;
150  font-size: 16px;
151  color: #71C9C7;
152}
153
154.sideber-buttom {
155  width: 100%;
156  height: 250px;
157  margin-top: 25px;
158  margin-right: 20px;
159  margin-bottom: 100px;
160  border: 2px solid #71C9C7;
161  border-top-right-radius: 0.5em;
162  border-top-left-radius: 0.5em;
163  background-color: white;
164}
165
166.sideber-buttom h6 {
167  background-image: -webkit-gradient(linear, left top, left bottom, from(#9ce3e1), to(#6cc6c4));
168  background-image: linear-gradient(#9ce3e1 0%, #6cc6c4 100%);
169  padding: 15px 15px;
170  font-weight: bold;
171  color: white;
172  border-top-left-radius: 0.4em;
173  border-top-right-radius: 0.4em;
174}
175
176.sideber-buttom a {
177  display: block;
178  color: black;
179  text-decoration: none;
180  margin: 18px;
181  font-size: 14px;
182  font-weight: bold;
183  border-bottom: 1px solid #71C9C7;
184  padding-bottom: 5px;
185}
186
187.sideber-buttom a:hover {
188  color: violet;
189}
190
191.information {
192  margin-top: 25px;
193  padding-bottom: 30px;
194  font-size: 13px;
195  background-color: white;
196  width: 640px;
197  float: right;
198}
199
200.information h6 {
201  margin: 20px;
202  padding-bottom: 10px;
203  padding-left: 10px;
204  font-weight: bold;
205  border-bottom: 3px solid #71C9C7;
206}
207
208.date {
209  font-weight: bold;
210  padding-right: 30px;
211  white-space: nowrap;
212}
213
214.info {
215  display: -webkit-box;
216  display: -ms-flexbox;
217  display: flex;
218  margin: 10px 20px;
219  border-bottom: 2px dotted silver;
220}
221
222footer {
223  width: 920px;
224  margin: 0 auto;
225}
226
227.footer-nav {
228  margin-top: 60px;
229  background-color: #71C9C7;
230  display: inline-block;
231  padding: 5px 0;
232  border-radius: 0.5em;
233  width: 100%;
234}
235
236.footer-nav a {
237  color: white;
238  font-size: 14px;
239}
240
241.fa-circle {
242  padding-left: 15px;
243  padding-right: 10px;
244  font-size: 14px;
245  color: white;
246}
247
248.tel {
249  text-align: right;
250  font-size: 14px;
251  border-bottom: 2px solid #71C9C7;
252  padding: 15px 0;
253}
254
255.copyright {
256  text-align: center;
257  font-size: 13px;
258}
259

sideber部分を左上に移動したいのですが、floatを付けても移動しませんでした。
どうすればよいでしょうか？よろしくお願いいたします。

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

回答1件

ベストアンサー

<div class="main-image">と<div class="information">を
<main>などで囲って、その要素にfloat: right;を指定する必要がありそうです。

CSS
1.main-image,
2information {
3  float: none;
4}
5
6main {
7  float: right;
8}

HTML
1<div class="main-wrapper">
2  <div class="container">
3
4    <main><!-- 追加 -->
5
6      <div class="main-image">
7        <img src="https://haniwaman.com/sample/part3/template_08/common/images/in01.jpg" alt="サンプルです">
8      </div>
9      <div class="information">
10        <h6>新着情報</h6>
11        <div class="info">
12          <div class="date">
13            <p>2012年08月01日</p>
14          </div>
15          <div class="content">
16            <p>診療時間変更のお知らせ】長期休診の前日8月11日は、通常より1時間長く診療をすることにしました。ご予約をお待ちしております。</p>
17          </div>
18        </div>
19
20        <!-- 省略 -->
21
22      </div>
23
24    </main><!-- 追加 -->
25    
26    <div class="sideber">
27      <!-- 省略 -->
28    </div>
29  </div>
30</div>