css - Fixed left navigation scrolling horizontal -


i have vertical navigation bar left position set fixed, if resize window , use horizontal scrollbar content div goes behind , editor overlaps navigation bar.

image:

editor overlaps navigation

code:

/* page.php */  <?php require(abspath . 'header.php'); ?>  content ...  <?php require(abspath . 'footer.php'); ?>  /* header.php */  <!-- css --> <link rel="stylesheet" href="css/style.css" />  <div id="header"> </div>  <?php require(abspath . 'menu.php'); ?>  <div id="content-wrapper">  /* menu.php */  <div id="left-menu">     <ul>         <li class="menu-title">             <a href="#">title</a>         </li>         <li><a href="#">page 1</a></li>         <li><a href="#">page 2</a></li>     </ul> </div>  /* footer.php */  </div><!-- close content wrapper -->  <div id="footer"> ***footer*** </div>  

css:

/* menu */  #left-menu {     position: fixed;     float: left;     width: 180px;     background: #000;     height: 100%;     font-family: "helvetica neue",helvetica,arial,sans-serif;     font-size: 14px;     line-height: 1.42857; }  /* menu style */  #left-menu ul {     padding: 0;     margin: 0;     list-style-type: none; }  #left-menu li {     text-indent: 15px;     line-height: 40px; }  #left-menu li {     display: block;     text-decoration: none;     color: #999999; }  #left-menu li a:hover {     text-decoration: none;     color: #fff;     background: rgba(255,255,255,0.2); }  /* menu title style */   #left-menu ul .menu-title {     line-height: 45px; }  #left-menu ul .menu-title {      height: 50px;     font-size: 18px; }  #left-menu ul .menu-title {     color: #999999; }  #left-menu ul .menu-title a:hover {     color: #fff;     background: none; }  /* content | header | footer */  #content-wrapper {     margin-left: 200px;     padding-top: 12px; }  #header {  }  #footer {     position: absolute;     bottom: 0;     right:0;     padding-right: 20px;     padding-bottom: 10px; } 

how avoid this?

thanks in advance.

your menu has position assigned it, parent div doesn't. parent div has no idea should positioned, menu wants fixed or positioned relative parent div.

what should assign parent div full width of page @ least, , give position or float left or right. mean div inside there position accordingly.


Comments

Popular posts from this blog

toolbar - How to add link to user registration inside toobar in admin joomla 3 custom component -

linux - disk space limitation when creating war file -