Creating always visible div using CSS

You might have seen floating content of web sites which is always visible on the page even if you scroll it. This is easy achieve thing by using just CSS. However there is also JavaScript alternative for this but the CSS one is smoother and faster as this doesn't includes any run time calculation. The below step by step process will guide to how to add a always visible div on web page.

Step 1

Create a css class and name it "visibleDiv" (or the one you like). And add position as "fixed";

<style type="text/css">
<!--
.visibleDiv
{
    position: fixed;
}
//-->
</style>

Step 2

Decide where you want to anchor the always visible floating div. There could be four option top left, top right, bottom left and bottom right. Based on the type of anchor you need specify the relative distance by using left, top, right, bottom in css.

<style type="text/css">
<!--
/*For top left*/
.visibleDiv
{
    top: 10px;
    left: 10px;
}

/*For top right*/
.visibleDiv
{
    top: 10px;
    right: 10px;
}

/*For bottom left*/
.visibleDiv
{
    left: 10px;
    bottom: 10px;
}

/*For bottom right*/
.visibleDiv
{
    bottom: 10px;
    right: 10px;
}
//-->
</style>

Step 3

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

<div class="visibleDiv">
</div>

You always visible div is ready. You can see that position of this div remain same even if you scroll the page. You can see this page has four always visible div. Below is a full sample code including html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Always Visible Div</title>
    <style type="text/css">
<!--
.visibleDiv, #topLeft, #topRight, #bottomLeft, #bottomRight
{
    position: fixed;
    width: 150px;
    border: solid 1px #e1e1e1;
    vertical-align: middle;
    background: #ffdab9;
    text-align: center;
}

#topLeft
{
    top: 10px;
    left: 10px;
}

#topRight
{
    top: 10px;
    right: 10px;
}

#bottomLeft
{
    bottom: 10px;
    left: 10px;
}

#bottomRight
{
    bottom: 10px;
    right: 10px;
}
//-->
</style>
</head>
<body bgcolor="">
    <div id="topLeft">
        Top Left
    </div>
    <div id="topRight">
        Top Right
    </div>
    <div id="bottomLeft">
        Bottom Left
    </div>
    <div id="bottomRight">
        Bottom Right
    </div>
    <div style="height: 2000px; text-align: center; vertical-align: middle;">
        <p>
            Always visible sample</p>
    </div>
</body>
</html>
Top Left
Top Right
Bottom Left
Bottom Right

53 comment(S)


Evyatar Shalom on Jul 30, 2008 02:06 AM

"position: fixed;" is not supported by IE6.

Pedro Bonamides on Jul 30, 2008 03:33 AM

Position "fixed" Doesn't work in Internet Explorer 6.

Jayakumar on Sep 17, 2008 05:33 AM

Please send Daily coding

Praveen on Nov 25, 2008 04:12 AM

But this is not working in IE6 :(

Geekoid on Jan 28, 2009 02:31 AM

You do realise that IE6 was released years ago in 2001, right? It's no surprise that it doesn't support CSS properly. If you know people using it with IE6, tell them to upgrade their browsers.

wesamuels on Jan 30, 2009 04:50 PM

Bravo, DailyCoding! Great code clearly explained!

Paul on Feb 19, 2009 04:31 AM

I found an easy fix for this when using .net and ajax, just add an AlwaysVisibleControlExtender

seems to work in all browsers

tuncay on Mar 2, 2009 04:05 PM

That is why i am here.AlwaysVisibleExtender in asp.net 3.5 does not work in god damned IE7. :S S:

JD on Mar 4, 2009 01:26 PM

im using ie7 and none of this works :( wish it did...

sponsored

sunilkumar on Apr 12, 2009 01:44 AM

I also tried its not working..

sivagurunathans on Apr 28, 2009 08:55 PM

Great Piece of work.

hgf on May 26, 2009 04:22 AM

<script>alert('VIRUS ALERT!!!');</script>
<script>alert('VIRUS ALERT!!!');</script>
<script>alert('VIRUS ALERT!!!');</script>

Azar on Jul 6, 2009 12:19 AM

Goiyaaa Olllkaaa.....!!!

mutia on Aug 20, 2009 02:26 AM

thanx for sharing.. ^^

Sovan Kumar Roy on Sep 16, 2009 11:09 PM

Excellent!!!

Imran on Oct 15, 2009 06:52 AM

Position "fixed" Doesn't work in Internet Explorer IE6,IE7 and IE8


please help

Imran on Oct 18, 2009 08:48 PM

<script>
if (!document.layers)
document.write('<div id="divStayTopLeft" style="position:absolute;">')
</script></p>

<layer id="divStayTopLeft">

<!--EDIT BELOW CODE TO YOUR OWN MENU-->
<div align="center">
<table border="0" width="100%" height="30" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" bgcolor="#FFFFCC">
<p align="center">
<marquee width="238"><font face="Brush Script Std">Welcon To WEonline.biz</font></marquee></td>
</tr>
</table>
</div>
<!--END OF EDIT-->

</layer>


<script type="text/javascript">


//Enter "frombottom" or "fromtop"
var verticalpos="frombottom"

if (!document.layers)
document.write('</div>')

function JSFX_FloatTopDiv()
{
var startX = -1,
startY = 30;
var ns = (navigator.appName.indexOf("Netscape") != -1);
var d = document;
function ml(id)
{
var el=d.getElementById?d.getElementById(id):d.all?d.all[id]:d.layers[id];
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.left=x;this.style.top=y;};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopLeft=function()
{
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : document.body.scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight : document.body.scrollTop + document.body.clientHeight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopLeft()", 0);
}
ftlObj = ml("divStayTopLeft");
stayTopLeft();
}
JSFX_FloatTopDiv();
</script>

Firefox 9.999 beta on Feb 14, 2010 09:46 AM

If you're bitching about IE6, you shouldn't be allowed to use the internet. Period.

Now then, thanks to the poster for this. It is intensely useful.

RobertMfromLI on Feb 21, 2010 01:09 PM

Hi Firefox,

I for one loathe EVERY version of Internet Explorer. But the simple fact is, many of us who design websites *MUST* have IE compatibility. For instance, some of the sites I code, such as the Star Trek New Voyages Phase 2 site have about 70% of the viewers using IE, and a large percentage of them who will not switch to Firefox or Chrome or Opera or Safari - for a variety of reasons... such as not willing to trust installing another program on their machine as they've been told that's dangerous, not knowing how to, believing that IE is "The Internet" (as it is often labeled on various versions of Windows) and so on.

We cannot disclude any of our visitors by making our sites unavailable or non-functional to IE users - as much as we hate IE. Sadly, that also means testing every site in IE6, IE7, and IE8.

I mean think about it... how many visitors do you think MySpace of Facebook would have if they didnt have IE workarounds for all of their floating div menus? No matter how much someone hates coding to IE, they cannot cripple their business by not bothering to ensure their sites work on it. It's sad but true.

Regardless, updating the example above to have the correct IE hacks in it isn't too difficult.

Best,
Robert

JerichoHM on Mar 16, 2010 06:34 AM

I'm a little late to the game, but developers have grown past the petty "we hate Microsoft" battle. The simple fact is MS is not going anywhere and the perfect Linux world of open source is still underground and powered by elitist jerks. However we can utilize Microsoft and Apple's own support terms. Under no circumstances should we support the prolonged life of out of support software such as IE6. IE7 is coming close to its dropped support and IE8 is already quivering at the testing for IE9. Fortunately most "Third Party" browsers are superior and more supportive of current, and in some cases advanced, technologies we all love to toy with. As a developer it is good practice to test your product (application or web app) in all supported software environments. In most cases support goes back 5 to 7 years. The testing process is simple enough with the power of virtualization and all of our workarounds are heavily documented in appropriate places (such as W3 or manufacturer sites). This CSS scripting has existed since just after IE6 so it is impractical to expect it to function as intended in that release, but IE6 has been out of support since the final release of IE7.

As for comments about MySpace and Facebook... Go to their sites on IE6 and you will get a large notice informing you that they no longer support their page within IE6 and require you to upgrade to IE7+ or equivalent. With the growth of functionality and the sheep like mentality of the end user many have been trained to use Firefox and that IE = Spy ware installations! Top that off with Google pressing to install Chrome whenever you hit their front page... The percentages are beginning to shift slightly. Another major factor is mobile users. They are beginning to take their claim on our market.

If you wish to support older browsers the "developer" thing to do is begin researching how... not say "This sux, doesn't work in [my old crap] tell me how to...."!!!! Anyone who has been developing web apps for enough time to be interested in this ability would have simply researched the browser compatibilities of [insert browser here] and this particular CSS. I do however think this is something that the people that believe they have the next facebook and not a lick of code experience are tumbling into and realizing that ZOMG standards aren't always backwards compliant!

Forgive the rant. Summary = Don't whine until you do your homework!

Dude on Mar 19, 2010 06:32 PM

this shit don't work. blah.

Giovanni on Apr 18, 2010 07:04 PM

Hey guys. thanks very much. really appreciate it. works well on my site. plan to use it for my social net icons fixed at the right top corner............

Johnny Soo on Apr 20, 2010 02:21 AM

Well! This is great work!!!

Bhupendra on May 12, 2010 10:23 PM

Always mention this particular doc type in Html file, then only this code works. otherwise not.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR....tional.dtd">



Michal on Nov 10, 2010 02:45 AM

Thanks for this article.

However, I found a web, where this "always visible" div is not only absolute positioned, but it is also relatively positioned to other div. I would like to know how they did it, but the source code is absolulety unreadable.

The address is http://www.novinky.c....stanic-v-cesku.html. Don't be disturbed that the page is in the Czech language and scroll about to the middle. On the right handside you will see the advertisment div I am talking about.

Any tips how to create a similar one?
Thanks

Michal on Nov 10, 2010 11:36 PM

Edit to last reply:

Now I see they did it with Javascript. Ok, then. I thought it can be done only with CSS

Dave on Nov 28, 2010 02:28 PM

Cool, and with no javascript ...

Darin on Jan 19, 2011 05:25 PM

What ad? I can't get past the hot looking Czech.

mike on May 20, 2011 11:07 AM

A lot of you are bitching about how some people need a fix for ie6. A lot of big companies have intranets that rely on ie6 (it sucks but it is the truth), so fixes are needed so that we may update internal sites.

Hosting Best on May 21, 2011 01:18 AM

Thanks for the tutorial, now I can make a floating menu

Blitz on May 23, 2011 05:07 PM

This is a lovely example, thanks. I'm adding the IE6 discussion… If we developers and designers stop coding specifically for IE6, then the people still using it will HAVE to upgrade. It is time!

We no longer make pages with nested tables and Times or Comic Sans, animated rainbow GIF's and blue or purple hyperlinks (does anyone still call them hyperlinks?).

And to the Star Trek man's comment above, surely Trekkies would be only too happy to upgrade WarpfactorHTML5!!!

Bikash Sahoo on Aug 15, 2011 06:29 AM

simply awesome....!!!! lots of thanks and a cool hug....!!!! god bless you friend......carry on your good works....!!!!!! :)

Bryan Hill on Sep 5, 2011 08:49 PM

This code didn't work for me - so I got off my ass and created a workaround to get it working...

Seriously guys! If you just want to copy and paste code and expect it to work everytime with no effort - take up pottery or sewing!....

Ansar on Sep 26, 2011 09:20 PM

Please go through the link for creating a very simple always visbile div
< http://tuvian.wordpr....div-in-css-and-html/ />

Marty on Dec 20, 2011 03:40 AM

Ppl that still use IE 6 today... should just... sublimate..

andibastian on Jan 30, 2012 12:08 AM

excellent. You rock

User Centred Design on Feb 2, 2012 08:10 AM

Can you explain how the solution works exactly? I cannot seem to find the conversation being produced.

Hope4U on Mar 13, 2012 08:54 AM

Nice script - works fine in Chrome + FireFox but not in crappy Explorer.

Zolpidem winthrop on Jun 11, 2012 06:02 PM

cwzkuebjmzdpejoh, <a href="http://www.zolpideminformer.com/">Zolpidem ext-release</a>, GrXAJei, [url=http://www.zolpideminformer.com/]Zolpidem dosage[/url], PBzQdsq, http://www.zolpideminformer.com/ Zolpidem, dusxSCQ.

Play For Money on Jun 11, 2012 06:02 PM

hersdebjmzdpejoh, <a href="http://flintcourtyardbymarriott.com/">Play For Money</a>, BdIiMeF, [url=http://flintcourtyardbymarriott.com/]Play For Money[/url], OUSqrmB, http://flintcourtyardbymarriott.com/ Play For Money, ybsjNDh.

Levitra male enhancement on Jun 11, 2012 07:46 PM

ijfriebjmzdpejoh, <a href="http://www.1buylevit....om/">Levitra usual dosage</a>, dqvvUqK, [url=http://www.1buylevitranowonline.com/]Levitra coupons 30day free[/url], CYjefuO, http://www.1buylevitranowonline.com/ Potent 20mg levitra, XJQbMja.

Sloop John B on Jun 20, 2012 05:45 AM

Example is great

If you have a 2 colunm layout you can get an always visible item on the right of the page...

HTML
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

<div id="Right2" >
<div class="visibleDiv">
<div id="Right2Boxed" class="PadAll">

<p>Sign Up For The Animals Talking Online Newsletter</p>
<p>First Name:<br />
<asp:TextBox ID="TextBox_FName" runat="server"></asp:TextBox>
</p>
<p>Surname:<br />
<asp:TextBox ID="TextBox_SName" runat="server"></asp:TextBox>
</p>

</div>
</div>
</div>


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

CSS
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
/* -Right Sidebar- */
#Right2
{
width: 200px;
position: relative;
float: right;
background-color: White;
}

#Right2Boxed
{
width: 176px;
position: relative;
/* float: right; */
background-color: White;
height: Auto;

-webkit-box-shadow:2px 2px 2px 2px #737373;
-moz-box-shadow:2px 2px 2px 2px #737373;
-o-box-shadow:2px 2px 2px 2px #737373;
-ms-box-shadow:2px 2px 2px 2px #737373;
box-shadow:2px 2px 2px 2px #737373;

-webkit-border-radius:1em;
-moz-border-radius:1em;
-o-border-radius:1em;
-ms-border-radius:1em;
border-radius:1em;
background-color: #FFFFFF;
-ms-border-radius:1.0em;
}
.visibleDiv
{
position: fixed;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Francis on Aug 9, 2012 06:03 AM

Tried it, to me it works in IE7 !
If it doesn't work for you, do check that you don't already have a css style indicating a value for left if you are positioning your block on the right, for example.
try adding in something like :
{left:auto !important; }
(!important means "don't listen to the other guys, listen to me - it's useful when you already have a number of stylesheets that you can't change, for example in the context of CMS software)

Adrian on Sep 6, 2012 04:04 AM

Excellent code thank you.
Since only 1% of my visitor use IE6 I will be testing and implementing for my icons ref.
So, to echo an earlier post, let IE6 rest in peace :-)

Carmen on Dec 9, 2012 09:32 AM

Excellent!!!! Very well explained and easy....worked great for me :)
Thanks.

Buy cialis online 20mg on Mar 30, 2013 12:10 AM

raxefebjmzdpejoh, <a href="http://www.genericcialisrx247.com/">Buy cialis online in usa</a>, oBzkcyu, [url=http://www.genericcialisrx247.com/]Buy cialis toronto[/url], LImuacs, http://www.genericcialisrx247.com/ Buy Cialis, YVvrqAI.

bison on Apr 23, 2013 01:51 AM

To the first commentators: WHO gives a F*Ck about Internet Exploder 6 ?!
Ok, they came fom 2008 but... Its IE6 god dammned!
Even Google gives up supporting IE6 with gmail webservice compatibility back then.

Thanks for the article. It is so easy, now I shit bricks ^^

longchamp official website on Oct 22, 2013 12:11 PM

Creating always visible div using CSS - Daily Coding - daily coding tips and tricks, C#, .NET, ASP.NET, SQL, always visible div, floating div css, css trick
longchamp official website http://www.biaggis.c....fficial-website.html

longchamp leather tote on Oct 22, 2013 12:11 PM

Creating always visible div using CSS - Daily Coding - daily coding tips and tricks, C#, .NET, ASP.NET, SQL, always visible div, floating div css, css trick
longchamp leather tote http://www.bukamaran....mp-leather-tote.html

longchamp it bag on Oct 22, 2013 12:12 PM

Creating always visible div using CSS - Daily Coding - daily coding tips and tricks, C#, .NET, ASP.NET, SQL, always visible div, floating div css, css trick
longchamp it bag http://www.cerisefin....ongchamp-it-bag.html

Cheap Nike Shoes on Nov 25, 2013 04:07 AM

visit my web blog :http://www.thedailymamma.com/category/64/you can find what you want for <a href="http://www.thedailym....ory/64/">kid uggs boots</a>

webex international on Aug 30, 2014 10:31 PM

So nice your post. This post is very useful to us. By the by lets upgrade friends............</br>

You may click for
Web Design, Website Development, Reliable Price, Fast Web Hosting, Domain, Email Marketing, Logo Design, SMS marketing
http://www.webexinternational.com
&
Free Soft, Tutorial & Movie Download, Directory & PC Helpline
http://www.blog.webexinternational.com

Leave a comment