html - CSS two column layout Issue -

i trying write 1 css 2 column layout. in code there 3 <div> tag. first <div> tag contains 2 other <div> tags. 1 navigation , 1 content. made these tags floating tags. there no problem these tags. problem is, parent <div> tag has 2px border, not render border around screen.

css code:

#wrap{     margin: 0 auto;     width: 900px;     border: 2px solid #ada095; }  #nav{     background-color: #ded8b9;     float: left;     width: 20%; }  #content{     background-color: #ede9db;     float: right;     width: 80%; } 

html code:

<div id="wrap">       <div id="nav">         <h2>sonnet index</h2>         <ul>           <li><a href="#">sonnet #1</a></li>           <li><a href="#">sonnet #6</a></li>           <li><a href="#">sonnet #11</a></li>           <li><a href="#">sonnet #15</a></li>           <li><a href="#">sonnet #18</a></li>         </ul>       </div>       <div id="content">         <h1>shakespeare's sonnet #18</h1>         <p>this 1 of famous of sonnets. referenced            in film dead poets society , gave names band            darling buds , book , television series darling buds            of may. read , weep!</p>         <ul>           <li>shall compare thee summer's day?</li>           <li>thou art more lovely , more temperate:</li>           <li>rough winds shake darling buds of may,</li>         </ul>          <p class="copyright">see          <a href="http://en.wikipedia.org/wiki/shakespeare%27s_sonnets">         shakespeare's sonnets</a> wikipedia article more information         </p>       </div>     </div> 

here output of code.

but, should follows--

thanks, in advance.

add overflow:auto; <div id="wrap">

here solution.

the html:

<div id="wrap">       <div id="nav">         <h2>sonnet index</h2>         <ul>           <li><a href="#">sonnet #1</a></li>           <li><a href="#">sonnet #6</a></li>           <li><a href="#">sonnet #11</a></li>           <li><a href="#">sonnet #15</a></li>           <li><a href="#">sonnet #18</a></li>         </ul>       </div>       <div id="content">         <h1>shakespeare's sonnet #18</h1>         <p>this 1 of famous of sonnets. referenced            in film dead poets society , gave names band            darling buds , book , television series darling buds            of may. read , weep!</p>         <ul>           <li>shall compare thee summer's day?</li>           <li>thou art more lovely , more temperate:</li>           <li>rough winds shake darling buds of may,</li>         </ul>          <p class="copyright">see          <a href="http://en.wikipedia.org/wiki/shakespeare%27s_sonnets">         shakespeare's sonnets</a> wikipedia article more information         </p>       </div>     </div> 

the css:

#wrap{     margin: 0 auto;     width: 900px;     border: 2px solid #ada095;     overflow:auto;     background:#ded8b9; }  #nav{     background-color: #ded8b9;     float: left;     width: 20%; }  #content{     background-color: #ede9db;     float: right;     width: 80%; } 

hope helps.