Saturday, March 31, 2007
« Debugging ASP.NET Applications on Window... | Main | The Case of the Malfunctioning Keyboard ... »

I realize that this is quite elementary and simple, however, it constantly eludes me.  Therefore, I'm documenting it here more for my benefit than anyone else's; though if it helps anyone out there - that's wonderful! :-)

I ofttimes find myself wanting to 'pin' an HTML element on the page.  This can be accomplished quite easily via the CSS position attribute with a value of absolute or fixed and a specified location.  More often than not, positions are specified in coordinated with the top and left attributes to designate the upper left corner of the element.  I find, however, that I frequently want to pin something on the right edge of the browser and/or the bottom.  When the user resizes his browser the element should move with the new dimensions.  For some reason, I always want to make this harder than it really is.

It's a simple problem really, if you can mentally depart from considering element position by the upper-left corner.  For instance, if you want to pin an element in the upper-right corner of the browser, simply specify the top and right properties.  It's that easy!

The CSS style:

#copyright { position:absolute; top:0; right:0; margin:10px }

The HTML:

<div id=”copyright”>
   Copyright &copy; 2007, Devstone Software<br />All rights reserved
</div>

Moving it to the bottom-right corner of the page is simple:  specify the bottom and right properties:

#copyright { position:absolute; bottom:0; right:0; margin:10px }

Along the same lines as this simple, yet somehow elusive mechanism, I frequently find that I want to define a DIV to fill the page.  You may be tempted to use the CSS attributes width and height with values of 100%.  This however is not the correct choice.  If you've tried it in the past you've probably become frustrated and perhaps even resorted to using a TABLE element to establish your page layout as a last recourse.

All is not lost.  You can simply use the same principles as above to define your DIV and fill the page.

The CSS style:

body
{ background-image:url(pattern.gif) }

#page
{ position:absolute; top:0; left:0; right:0; bottom:0; margin:5px; border:solid 2px black; background-color:white }

The HTML:

<body>
   <div id=“page“>Page content here</div>
</body>

Elementary, my dear Watson.  Now maybe by having jotted this down I'll remember it in the future.

Saturday, March 31, 2007 5:21:00 PM (Mountain Standard Time, UTC-07:00)  #    Disclaimer  |  Comments [2]  |  Trackback