html - Fix Sidebar in the same row as other elements -


so have sidebar wan't fixed in page , have other column in row scrollable.

i tried changing position css attribute of element, original content squished first column.

a demo of have available here: jsfiddle

here html:

<div class="container">             <div class="row">                 <div class="col-4" role="sidebar">                     <div class="diamond"><span>rs</span></div>                     <br />                     <div class="brief">                         text here...                     </div>                     <form class="search">                         <input type="text" placeholder="search...">                         <button type="submit"><i class="fa fa-search"></i></button>                     </form>                     <ul class="sidebar-menu">                         <li class="github"><a href="#">github</a></li>                         <li class="twitter"><a href="#">twitter</a></li>                         <li class="stackoverflow"><a href="#">stackoverflow</a></li>                         <li class="linkedin"><a href="#">linkedin</a></li>                     </ul>                 </div>                  <div class="col-8" role="content">                     <h1 class="title">title</h1><div class="horizontal-rule"></div>                     <nav class="subnav">                         <ul>                             <li><a href="#">link</a></li> /                             <li><a href="#">link</a></li> /                             <li><a href="#">link</a></li> /                             <li><a href="#">link</a></li>                         </ul>                     </nav>                 </div>             </div>         </div> 

i don't know element want have fixed, use method:

<div id="id"> content of div </div> 

and css:

#id { position: fixed; left: 30px; // or whatever want top: 100px; // or whatever want } 

i hope helped you!


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -