I don't mean to confuse this, but in addition to the good answers here, you can also center an absolutely positioned div:

.centered-div {

position: absolute;

width: 500px;

top: 50px;

left: 50%;

margin-left: -250px;

}

You set one of the horizontal positions to 50%, then use a negative margin of half the width of the div to pull it back from the direct middle of the page position. This only applies for absolute divs.

I don't mean to confuse this, but in addition to the good answers here, you can also center an absolutely positioned div:

.centered-div {

position: absolute;

width: 500px;

top: 50px;

left: 50%;

margin-left: -250px;

}

You set one of the horizontal positions to 50%, then use a negative margin of half the width of the div to pull it back from the direct middle of the page position. This only applies for absolute divs.

Don't ever use an absolute positioning unless you want to create serious problems for you down the line. this comes from experience of designing websites over the years.

JTana you need to reexamine this position . Lol. I do agree that positioning multiple divs absoultely to create a website (as some versions of dreamweaver used to create -- I don't know about CS 5.5 yet) are not a good idea. But when you know what you're doing they are very useful for certain tasks. But yeah, I wouldn't use an absolutely positiond div as a main content div, although I don't quite know the drawbacks for that. Do you happen to know one or two reasons?

I wouldn't use an absolutely positioned div as a main content div, although I don't quite know the drawbacks for that.

Absolutely positioned elements are removed from the normal document flow. There's nothing to be gained from doing this to a main content division. Unless you want your layout to be positioned all over the place. See Page Layout 101

thanks for the reply Nancy. I think you may be falling victim to the common designer anti-something zealotry. I think there are definite places for absolutely positioned elements on a page. And I still can't think of why a content-wrapper couldn't be absolutely positioned. The contents would still be within a regular wrapper as far as I know. Are there instances where the behavior of absolutely positioned div content changes? There may be some examples. But yes, as you point out (although I didn't look at the link), using multiple absolute divs in various places on the page, may make universal positioning in various browsers and at various window-sizes, difficult.

I think using absolute positioning for layout purposes is not only wrong, it's just completely wrong. And it's unnecessary. It's like hitting a fly with a sledgehammer when all that's needed is a finishing hammer. This is not zealotry, it's good sense and best practice.

By far the biggest problems with absolute positioning when used as a general layout approach are:

1. If the absolutely positioned element is a content container, when that content is enlarged the corresponding change in size is something about which the rest of the page is unaware, usually leading to a mess with overflowing content.

2. Since absolutely positioned elements are removed from the normal flow, they cannot contribute to the overall infrastructure's stability. The page is rendered as if they weren't even there. They are like a building block in someone else's layout. It's a waste of a good tool.

3. Since the location of an absolutely positioned element in the code has nothing to do with its placement on the screen, the flow of content on the page is disrupted, and may actually make no sense whatsoever when 'rendered' with a screen reader. Thus, there is the potential to introduce accessibility issues into your site by the indiscriminate use of absolute positioning.

4. In most cases, there is no layout requirement for absolute positioning. If one doesn't need to use something that can cause unexpected problems, then why would one use it?

Thanks for that Murray. I don't want to hijack this thread with "designer debate" so I won't respond in detail, but I think that a wrapper div that is absolutely positioned has no drawback that I know of. It is essentially like creating a smaller window inside the browser window. That is usually like using a sledgehammer to kill a fly as you mentioned. But I suppose there are times when it might be useful.

(Man that "reply to original post" button is tricky. It doesn't work on FF 8.01 on mac -- the content disappears and no text box is displayed.)

Well, let's say you want the entire site to be a 500px box in the bottom right corner of the window.

Seems an extreme example, but OK. How oftem have you come across this need - just curious?

I don't know if search engines look kindly on sites that have text that is not visible (google doesn't like that white text on white background).

That's pretty much death in SEO land. I wouldn't dare venture into that.

And of course it can be nice to use absolute divs with javascript to show and hide content layers. Maybe using ajax for this is faster?

But there's no need to make those elements positioned at all is there? I mean if you are only showing one at a time, then toggling the display style will do the trick without needing positioning. Where it comes in handy is with something like a Lightbox effect. But again, that's a specialty application, no?

Anyhow, my point is that as a general purpose layout tool, absolute positioning is not a good choice.