Eden Ridgway's Blog

.Net and Web Development Information

  Home :: Contact :: Syndication  :: Login
  105 Posts :: 1 Stories :: 78 Comments :: 3 Trackbacks

Search

Article Categories

Archives

Post Categories

Development

General

Bluerobot has a technique to center fixed width div using a negative margin. All you do is set the left and top positions of the div to 50% and then set the left and top margin's at half the width and the height of this div, like this:

<style>
.PopupPanel
{
position
: absolute;
left
: 50%;
top
: 50%;

height
: 200px;
margin-top
: -100px;

width
: 400px;
margin-left
: -200px;
}
</
style>

If you want the div to scale with the page however, it's even easier. You start off by setting the percentage size of the popup and then subtract half of that from 50% to get the top and left percentage positions:

<style>
.PopupPanel
{
position
: absolute;
left
: 30%;
top
: 35%;
height
: 30%;
width
: 40%;
}
</
style>

Here is an example of a centered fixed width div FixedWidthDivDemo.html and this is the percentage based example PercentageWidthDivDemo.html

posted on Sunday, September 25, 2005 2:39 AM
Comments have been closed on this topic.