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;
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>
<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>
No comments:
Post a Comment