javascript - Wrapper Not Expanding With Content -


i in process of creating slide in/out side bar page cannot unless wrapper div covers whole length of body's width , height, doesn't , don't know why.

i'm not entirely sure code include i've included here think is. if need preview code, have provided pastebin link below.

image of issue - http://i.imgur.com/wwnaebp.png enter image description here see code here if needs be:

html - http://pastebin.com/tqt6xc4z css - http://pastebin.com/ms5gh56x

thanks in advance.

html:

<div id="wrapper">     <div id="sidebar">         <nav id="nav">             <h3 id="welcometext">welcome to<br>lakeside books</h3>             <div id="searchbar">                 <form action="http://www.example.com/search.php">                     <input type="text" name="search" placeholder=" book search" class="searchstyle"/>                 </form>             </div>             <ul>                 <li style="background-color: #333">                     <a href="1index.html" class="link">                         <span style="color: #ed786a">home</span>                     </a>                 </li>                 <li>                     <a href="2catgeories.html" class="link">                         categories                     </a>                 </li>                 <li>                     <a href="http://example.com" class="link">                         bestsellers                     </a>                 </li>                 <li>                     <a href="http://example.com" class="link">                         find                     </a>                 </li>                 <li>                     <a href="http://example.com" class="link">                         contact                     </a>                 </li>             </ul>         </nav>     </div> 

css:

html, body { /* ### */     margin:0;     padding:0;     height:100%;     width:100%; } body {     background-color: #fdfdfd;     font-family: arial, "open sans", sans-serif-light, sans-serif, "segoe ui"; } #wrapper {     width: 100%;     height: 100%;     margin:0 0 0 20%; /* ### */ } #sidebar {     background-color: #212528;     position: fixed;     width: 20%;     height: 100%;     top: 0;     left: 0;     overflow: hidden;     text-shadow: 0.1em 0.1em 0 rgba(0, 0, 0, 0.1); } 

have been stuck on while while trying create opening , closing sidebar appreciate @ all!

go through containers , remove :

height: 100%; // scaling containers window height leaving white space...     #containerthree {    width: 80%;    height: 100%;   <-- here problem    margin-left: auto;    margin-right: auto;    text-align: center;    color: #888888;    padding: 0 0 2em 0;    border-bottom: 2px solid #dadada;    box-shadow: inset 0 -6px 0 0 #fdfdfd, inset 0 -8px 0 0 #dadada;   } 

Popular posts from this blog

c# - ODP.NET Oracle.ManagedDataAccess causes ORA-12537 network session end of file -

matlab - Compression and Decompression of ECG Signal using HUFFMAN ALGORITHM -

utf 8 - split utf-8 string into bytes in python -