Question

I have a layout which consists of menu on left and main content in the next div. What is happening however, is that the content div doesn’t appear to be positioning correctly. It is halfway down the menu instead of correctly aligned at the top. As a novice to css I would be grateful if someone could point out my error. Please excuse the inline style, but this is just for learning. I posted original code at fiddle but when I submitted my question, message stated to supply inline code. Thanks

UPDATE: Added Image.

<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

Remove the float from your #main div. The menus alone could float, living the content to position itself accordingly.