Advertisements
Home > HTML > How to create a always visible div in css and HTML

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 name (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.

Advertisements
Categories: HTML Tags: ,
  1. Abhi
    October 26, 2011 at 11:49 am

    Doesn’t work in IE any version. Please post the one that works in most browsers

  2. September 22, 2012 at 9:50 am
  1. September 22, 2012 at 9:06 am

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: