How to create a always visible div in css and HTML

How to create a div that is always visible even while scrolling

In some scenario we need to show some information like ads,twitter like account’s logo,new updates etc..  always to user even he is scrolling website We can implement this using simple HTML and CSS within few steps. We can create more attractive div with given appropriate color and style to css.

Step by step process to create always visible div

Here we are explaining how easily we can create an always visible div using simple CSS in html by steps by step. We can create always visible div within 2 steps.

Step 1

Create a css class and name it "alwaysVisibleDiv" (you can give any name that you like). And add position as "fixed";

<style type="text/css">

<!--

.alwaysVisibleDiv

{

    position: fixed;

    bottom: 10px;

    left: 10px;

}

//-->

</style>

Step2

Add a new div to the page and specify the class="alwaysVisibleDiv"

<div class="alwaysVisibleDiv">

    Hello I am here always

</div>

Always visible div is ready. You can see above div position is always there (here we are fixed bottom left) even user scrolling website. We can fix this div at any position of the web page by giving bottom,right,top,left position to the class ‘alwaysVisibleDiv’. By using this html css code we can keep element in view while scrolling website without any jquery,ajax techniques.