Header menu

_________________________________________________________________________________

Wednesday, 5 March 2014

How to create Fixed left sidebar in html ?


To create a fixed left sidebar in html we need to make its position fixed in css and float left so that sidebar remain left aligned.

 float:left;
 position:fixed; 

These two lines will do the magic for you. To understand more run the below example:


<html>
           <head>

                      <style>
                                 .left-sidebar{
                                                        float:left;
                                                        position:fixed;
                                                        width:200px;
                                                        background-color:#47D7ED;
                                                     }
                                 .left-sidebar p {
                                                         width:700px;
                                                         text-align:justify;
                                                      }
                                 .container1{
                                                        position:relative;
                                                        width:84%;
                                                        background-color:#FFFFFF;
                                                        border:1px solid;
                                                        min-height:1500px;
                                                        height:auto;
                                                        margin-left: 205px;
                                                      }
                         </style>
            </head>
<body>
           <div class='left-sidebar' id='left-sidebar'>
                     <ul>
                            <li id='li-banner'>Banners</li>
                            <li id='li-banner1'>Banners</li>
                           <li id='li-banner2'>Banners</li
                     </ul>
             </div>
             <div id='container' class='container1'>
                      <h1>My Left Side bar is fixed.</h1>
                      <h1>Its not gonna move :)</h1>
             </div>
</body>
</html>