CSSでのフレームワーク（カラムの作成）

前提・実現したいこと

cssでのカラムの作成

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

思い通りの結果でなく困っている

CSS
1article,
2aside,
3details,
4figcaption,
5figure,
6footer,
7header,
8hgroup,
9menu,
10nav,
11section {
12    display: block;
13}
14
15#wrap{
16    width: 960px;
17    margin: 0 auto;
18}
19
20header{
21    border: 1px solid gray;
22}
23
24#menue{
25    border: 1px dashed red;
26    margin: 10px;
27}
28
29#main{
30    width: 958px;
31    border: 1px solid gray;
32    margin-top: 10px;
33}
34
35#content{
36    width: 620px;
37    height: 600px;
38    border: 1px dashed blue;
39    margin: 10px 10px 10px 10px;
40    float: left;
41}
42
43#sidenavi{
44    width: 304px;
45    height: 600px;
46    border: 1px dashed green;
47    margin: 10px 0px 10px 0px;
48    float: left;
49}
50
51```#mainのborderの中にコンテンツとサイドナビを入れようとしたが失敗した。
52どうすれば良いのでしょうか？
53![イメージ説明](2e8fcd1ff470f150d16c3a901a90e555.png)
54
55
56```HTML
57<!DOCTYPE html>
58<html lang="ja">
59
60<head>
61    <meta charset="UTF-8">
62    <title>cafeのホームページ</title>
63    <link rel="stylesheet" href="style.css">
64    <!--[if lt IE 9]>
65    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
66    </script>
67    <![endif]-->
68</head>
69
70<body>
71    <div id="wrap">
72        <header>
73            <h1>ヘッダー</h1>
74            <div id="menue">
75                <h3>menue</h3>
76            </div>
77        </header>
78        <div id="main">
79            <h1>メイン</h1>
80            <div id="content">
81                <h2>コンテンツ</h2>
82            </div>
83            <div id="sidenavi">
84                <h2>サイドナビ</h2>
85            </div>
86        </div>
87
88    </div>
89</body>
90
91</html>

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

回答2件

ベストアンサー

floatを解除すればよいです。ただ、大きなレイアウトについては Flexbox や Grid を使うことをお勧めします。

CSS
1#main{
2    width: 958px;
3    border: 1px solid gray;
4    margin-top: 10px;
5    display: flow-root; /* ADD */
6}
7```**動くサンプル：**[https://jsfiddle.net/vu9rcwq5/](https://jsfiddle.net/vu9rcwq5/)
8
9---
10
11
12【display - CSS: カスケーディングスタイルシート | MDN】
13[https://developer.mozilla.org/ja/docs/Web/CSS/display](https://developer.mozilla.org/ja/docs/Web/CSS/display)
14
15【display: flow-root で clearfix とおさらば - nlog】
16[https://namikuguri.hatenablog.com/entry/2018/01/30/234910](https://namikuguri.hatenablog.com/entry/2018/01/30/234910)
17
18---
19
20【これからのCSSレイアウトはFlexboxで決まり！ | Webクリエイターボックス】
21[http://www.webcreatorbox.com/tech/flexbox/](http://www.webcreatorbox.com/tech/flexbox/)
22
23【CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 | コリス】
24[http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html](http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html)
25
26
27
28【これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法 - ICS MEDIA】
29[https://ics.media/entry/15921/](https://ics.media/entry/15921/)
30
31【CSS Grid Layout を極める！（基礎編） - Qiita】
32[https://qiita.com/kura07/items/e633b35e33e43240d363](https://qiita.com/kura07/items/e633b35e33e43240d363)