theduigirly
New Member
The content in my sidenav is not staying within it's container. It looks OK in jsfiddle but not in my browser. (Firefox 17.1 Ubuntu Quantal)jsfiddle\[code\]<div id="page-wrapper"> <div id="header"></div> <div id="content-wrapper"> <div id="content"> <h1>Title</h1>  <p>lipsum...</p> </div><!-- END content --> <div id="menu-wrap"> <div id="menu"> <ul> <li><a href="http://stackoverflow.com/questions/14061586/#">index</a> <ul> <li><a href="http://stackoverflow.com/questions/14061586/#">Item one</a></li> <li><a href="http://stackoverflow.com/questions/14061586/#">Item two</a></li> <li><a href="http://stackoverflow.com/questions/14061586/#">Item three in the list</a></li> </ul> </li> </ul> </div><!-- END menu --></div><!-- END menu-wrap --> </div><!-- END content-wrap --> <div id="footer"></div></div><!-- END page-wrapper -->\[/code\]The CSS\[code\]h1 { font-size:34px; text-align: center; }#header { height: 35px; width: 100%; background-color: #336699; position: fixed; top: 0px; z-index: 10;}#content-wrapper { position: absolute; top: 70px; bottom: 50px; left: 0px; right: 0px;}#content { width: 90%; float: right; padding-bottom: 50px; padding-right: 30px; line-height: 2em; }#menu ul li { list-style-type: none; } #menu ul ul { display:none; position: fixed;} #menu ul ul a {} #menu ul a { text-decoration: none; color: black;}#menu ul li:hover ul { display:block; left: 0; line-height: 20px; width: 170px; height: 400px; background: #CCC; border-top-right-radius:1em; border-bottom-right-radius:1em; padding-left: 22px; text-align: left; line-height: 35px; padding-top:20px; font-size: 14px;} #menu-wrap { position:fixed; top:50px; width: 52px; height: 22px; border-top-right-radius: 6px; border-bottom-right-radius:6px; background: rgba(181,181,181,0.5); text-align: center; padding-top: 3px; z-index: 0; }#footer { height: 10px; width: 100%; background-color: green; position: fixed; bottom: 0px;}\[/code\]