想要垂直导航栏。浮动：留在导航和内容上，但仍然无法让它们彼此相邻

Question

我想在主页面左侧显示一个垂直导航栏。我已将我的侧面导航和我的主要内容放在div中并将它们向左浮动，但我仍然无法将它们并排放置。

body{
	    margin: 0;
	    padding: 0;
	    height: 100%;
    }
    #container{
	    min-height: 100%;
	    position: relative;
    }
    #header{
	    background: #ff0;
	    padding: 10px;
	    width: 100%; /* This will make the Header 100% of the width of the container */
	    height: 162px; /* This will stop the Header form stretching */
	    background-image: url("../logo.jpg"); /* This will display the header and ensure its size it the current size of the page. */
    	background-repeat: no-repeat;
    }
    #body{
	    padding: 10px;
	    padding-bottom: 80px; /* Height of the footer */
    }
    #footer{
	    position: absolute;
	    bottom: 0;
	    width: 100%;
	    height: 80px; /* Height of the footer */
	    background: #6cf;
    }

    ul{
	    font-size: x-large;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
    }

    li{
	margin: 0 0 5px 0;
	background: #ccbadc;
    }

    #sid_nav, #main{
	    width: 400px;
	    height: 400px;
	    float:left;
	   #border:1px solid red;
       #margin-right:10px;
    }

<DIV id="container">
    <DIV id="header"></DIV> <!--- Banner --->

    <DIV id="body">
    <DIV id="side_nav">
	    <nav>
		    <ul>
			    <li id="a"><a href="#">Report an Incident</a></li>
			    <li id="b"><a href="#">Resolve an Incident</a></li>
			    <li id="d"><a href="#">Search Incidents</a></li>
			    <li id="e"><a href="#">Equipment Lookup</a></li>
	    	</ul>
	    </nav>
    	</DIV>

    	<DIV id="main">
    		<p>TESTING</p>
    	</DIV>
    </DIV> <!--- ending of body div--->

        <DIV id="footer">
        <br>Internal #: 6037 or 6044</br>
        </DIV> <!--- ending of footer div--->
        </DIV> <!--- ending of container div--->

Answer 1

你的CSS中有错误

将#side_nav, #main替换为以下

#side_nav, #main{
    width: 400px;
    height: 400px;
    float:left;
   border:1px solid red;
   margin-right:10px;
}

Answer 2

你拼写sid_nav是css，而side_nav是html。