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 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; }