html - cssdivおよびfloatポジショニングエラー

Question

左側のメニューと次のdivのメインコンテンツで構成されるレイアウトがあります。ただし、何が起こっているのかというと、コンテンツdivが正しく配置されていないようです。上部に正しく配置されるのではなく、メニューの途中にあります。cssの初心者として、誰かが私のエラーを指摘してくれたらありがたいです。インラインスタイルは失礼しますが、これは学習用です。フィドルに元のコードを投稿しましたが、質問を送信すると、インラインコードを提供するようにメッセージが表示されました。ありがとう

更新：画像を追加しました。

<script type="text/javascript">
    $(function() {
        $( "#menu" ).menu();
    });
    </script>

    <script type="text/javascript">
    $(function() {
        $( "#menuevents" ).menu();
    });
    </script>



<ul id="menuevents" style="width:20%;margin-top:5px;float:left;height:auto !important;">
          <div style="padding:255px 0 5px 3px;color:blue;float:left;clear:both;"></div>

        <li><a href="#">Inbox</a></li>
        <li><a href="#">Sent Items</a></li>
        <li><a href="#">Junk Email</a></li>
        <li><a href="#">Deleted Items</a></li>
        <li class="ui-state-disabled"><a href="#">Drafts</a></li>

        <li>
            <a href="#">Delphi</a>
            <ul>
                <li class="ui-state-disabled"><a href="#">Ada</a></li>
                <li><a href="#">Saarland</a></li>
                <li><a href="#">Salzburg</a></li>
            </ul>
        </li>

        <li><a href="#">Saarland</a></li>
        <li>
            <a href="#">Salzburg</a>
            <ul>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li><a href="#">Perch</a></li>
            </ul>
        </li>
        <li class="ui-state-disabled"><a href="#">Amesville</a></li>

    </ul>

    <ul id="menu" style="width:20%;margin-top:15px;float:left;clear:both;height:auto !important;">


        <li><a href="#">Inbox</a></li>
        <li><a href="#">Sent Items</a></li>
        <li><a href="#">Junk Email</a></li>
        <li><a href="#">Deleted Items</a></li>
        <li class="ui-state-disabled"><a href="#">Drafts</a></li>

        <li>
            <a href="#">Delphi</a>
            <ul>
                <li class="ui-state-disabled"><a href="#">Ada</a></li>
                <li><a href="#">Saarland</a></li>
                <li><a href="#">Salzburg</a></li>
            </ul>
        </li>

        <li><a href="#">Saarland</a></li>
        <li>
            <a href="#">Salzburg</a>
            <ul>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li>
                    <a href="#">Delphi</a>
                    <ul>
                        <li><a href="#">Ada</a></li>
                        <li><a href="#">Saarland</a></li>
                        <li><a href="#">Salzburg</a></li>
                    </ul>
                </li>
                <li><a href="#">Perch</a></li>
            </ul>
        </li>
        <li class="ui-state-disabled"><a href="#">Amesville</a></li>

    </ul>

    <div style="padding-left:1%;float:left;clear:inherit;">&nbsp;</div>

        <div id="main" style="width:25%;border-left:thin solid #cccccc;border-right:thin solid #cccccc;padding:0 0 0 2%;height:500px;float:left;overflow:auto;">
          <br />

          <table id="customers">
            <form <form name="search" action="" method="POST" enctype="application/x-www-form-urlencoded">
            <input type="text" id="mailsearch" name="mailsearch" value="Search" size="40" maxlength="40"  min="" max="" accept=""/>

            </form>
            <br /><br />

    </table>  

        </div>

http://jsfiddle.net/jHRgc/7/

Answer 1

divから を削除floatします。#mainメニューだけを浮かせて、それに応じてコンテンツを配置することができます。

Answer 2

#main の不要なフロートを削除し、両方のメニューにナビゲーション ラッパーを追加することで、適切にフロートすることができるはずです。この CSS を試してください:

#main{
    border: 1px solid rgba(0,0,0,.25);
    padding: 10px;
}
nav{
    float: left;
}
#menuevents, #menu{
    margin:5px 10px 0 0;
}
#menu{
    margin-top:15px;
}​

HTML を次のように変更します。

<nav>
  <ul id="menuevents">    
    <li><a href="#">Inbox</a></li>
    <li><a href="#">Sent Items</a></li>
    <li><a href="#">Junk Email</a></li>
    <li><a href="#">Deleted Items</a></li>
    <li class="ui-state-disabled"><a href="#">Drafts</a></li>

    <li>
        <a href="#">Delphi</a>
        <ul>
            <li class="ui-state-disabled"><a href="#">Ada</a></li>
            <li><a href="#">Saarland</a></li>
            <li><a href="#">Salzburg</a></li>
        </ul>
    </li>

    <li><a href="#">Saarland</a></li>
    <li>
        <a href="#">Salzburg</a>
        <ul>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li><a href="#">Perch</a></li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a></li>

  </ul>

  <ul id="menu">
    <li><a href="#">Inbox</a></li>
    <li><a href="#">Sent Items</a></li>
    <li><a href="#">Junk Email</a></li>
    <li><a href="#">Deleted Items</a></li>
    <li class="ui-state-disabled"><a href="#">Drafts</a></li>

    <li>
        <a href="#">Delphi</a>
        <ul>
            <li class="ui-state-disabled"><a href="#">Ada</a></li>
            <li><a href="#">Saarland</a></li>
            <li><a href="#">Salzburg</a></li>
        </ul>
    </li>

    <li><a href="#">Saarland</a></li>
    <li>
        <a href="#">Salzburg</a>
        <ul>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Delphi</a>
                <ul>
                    <li><a href="#">Ada</a></li>
                    <li><a href="#">Saarland</a></li>
                    <li><a href="#">Salzburg</a></li>
                </ul>
            </li>
            <li><a href="#">Perch</a></li>
        </ul>
    </li>
    <li class="ui-state-disabled"><a href="#">Amesville</a></li>    
  </ul>
</nav>
<div id="main" style="">
    <form <form name="search" action="" method="POST" enctype="application/x-www-form-urlencoded">
        <input type="text" id="mailsearch" name="mailsearch" value="Search" size="40" maxlength="40"  min="" max="" accept=""/>
    </form>
</div>

http://jsfiddle.net/YPXqd/6/

注: どうしても必要な場合を除き、インライン スタイルは使用しないでください。注 2: 絶対に使用!importantしないでください。