CSSのfloatがうまくいかない

前提・実現したいこと

HTML, PHPで掲示板を作成しています。いまCSSでレイアウトを調整しているのですが、floatを使った配置がうまくできず困っています。

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

左から順に、スレッド一覧、送信フォーム、使い方説明欄の順にしたいのに、
送信フォーム、スレッド一覧、使い方説明欄の順になってしまします。

該当のソースコード

html
1
2<html>
3    <head>
4        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
5        <link rel="stylesheet" href="style.css">
6    </head>
7    <body>
8    <div id="wrap">  
9        <div id="header">  
10            掲示板
11        </div><!-- /header -->  
12        <div id="mainWrap">
13
14            <!--投稿フォーム-->
15            <form method="post" action="">
16                名前<br><input type="text" name="pre_name" value=""><br>
17                <textarea name="pre_comment" rows="10" cols="10"></textarea>
18                <input type="hidden" name="cthread" value="">
19               <input type="submit" name="pre_send" value="プレビュー" />
20            </form>
21
22            <!-- ここにコメントを表示する -->
23            <?php
24            for ($i = 1; $i <= 10; $i++) {
25                    echo $i.'コメント<br>';
26                }
27            ?>
28        </div><!-- /mainWrap -->
29
30        <!--ここに使用方法を記載-->
31        <div id="usage">
32            使い方：～～～～～～～～～<br>
33            ～～～～～～～～～～～～～<br>
34            <br>
35        </div>
36
37        <!--ここにスレッドの一覧を表示-->
38        <div id="thread_list">
39            スレッド一覧<br>
40            <?php
41               for ($i = 1; $i <= 10; $i++) {
42                    echo $i.'<br>';
43                }
44            ?>
45        </div><!-- /sideWrap --> 
46    </div><!-- /wrap --> 
47    </body>
48</html>

css
1#header{font-size:20px;height:32px;background-color:#E0E0E0;}
2#wrap { width:100%;}
3#thread_list { width:20%; float:left;}
4#mainWrap { width:60%; float:left;}
5#usage{width:20%; height:100px; background-color:lightgray;float:right;}

試したこと

＃thread_listと#mainWrapを入れ替えてみましたが変わりませんでした。

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

回答1件

ベストアンサー

仕様通りかと思いますよ。
で、HTMLの記述順が＝コンテンツの重要度だとして、あくまでFloatで配置する場合は、
divを1つかませる必要があるかと思います。

HTML
1<div id="container">
2  <div id="mainWrap"></div>
3  <div id="usage"></div>
4</div>
5<div id="thread_list"></div>

CSS
1#container {
2  float:right;
3  width:80%;
4}
5#mainWrap {
6  width:75%;
7}
8#usage {
9  width:25%;
10}

(上記は変更点のみ)

他の方法は、3つを#containerの中に入れて、#containerをFlexに、
さらにorderで順番を割り当てればOK

投稿2018/11/10 15:34

LibertyBell3

総合スコア1084

qope

2018/11/10 16:45

ご回答ありがとうございます。ご提示していただいたコードに直したところ、使用方法欄（#usage)が投稿フォーム（#mainWrap）の真下に配置されるのですが、これを一番左に持っていきたいです。つまり、スレッドリスト、投稿フォーム、使用方法欄が左から順に水平に配置されるようにしたいです。そこで#usageにfloat:rightを追加したところ、使用方法欄が右下に配置されてしまします。右上に配置するためにはどのように修正すればよいでしょうか？

LibertyBell3

2018/11/10 17:56

全部脳内でソースを書いた状態なので、さきほど実際作りましたが、問題なく表示されています(各div内はID名だけ入れた)。なので、おそらくカラム落ち状態だと思うので、各要素の幅がサイズオーバーしていないか確認をお願いします(ブラウザの開発ツールなどで)。いずれも％なので、内部でpaddingを入れたりすれば、簡単にサイズオーバーします。その場合、「box-sizing:border-box;」を追加すれば大抵解決します。

qope

2018/11/10 18:06

box-sizing:border-box;を追加すると、解決しました。ありがとうございました！

LibertyBell3

2018/11/10 18:32

あ、やっぱり(笑)。無事解決して何よりです。