CSS - Absolute Div Off Center

I've only just started mucking round with CSS. Just by looking at other peoples sites and seeing how they do something, and then mucking around with what they've written to learn it.

What I am trying to do at the moment, is just have a blank page with at the absolute center (Vertical and Horizontal) of the screen have some text. But the text is only horizontally centered not vertically.

Heres the codes:
In seperate stylesheet
Code:

#center {
	position: absolute
	width: 100%;
	height: 100%;
	text-align: center;
	vertical-align: middle;
}

and in the page

Code:

<div id="center">
      <p><span class="aus">Austrlia</span><br>
        <span class="contact">admin@sixfootone.com +61 412 587890</span>
        </p></div>

Any ideas?
Thanks

I have the following page.

I need the image and all the ajax to be centered on the page, no matter how the user resizes it. I've tried several different methods, but it always seems to screw up the positioning of the ajax buttons.

hello

Is it possiable to position an image absolutly using its center as a the measurement refrence as opposed to the upper left corner. If so how would I do this.

Thanks

Nick Carlevaris

Hi

I'm having a bit of trouble with a DIV/CSS layout - 2 DIVs are inside a 100% height 100% width container DIV. The first (top) DIV is the content and the second (bottom) DIV being a 100% width 240px height footer DIV.

I can make the footer stick to the bottom of the page and display fine no problem, however, I am having trouble getting the content div to fill only the area above the footer. If I specify a 100% height for it then it extends the entire height of the page and content disappears behind the footer. Plus, I want to absolutely center the content in the space above the footer, not the absolute center of the whole page, which is all i am acheiving with 100% height!

Basically, I need the content DIV to extend 100% then subtract the 240px height of the footer - I suspect it's not wise to mix px and %, however.

I have attached an image to help with my probably confusing explanation!

I do have a workaround using tables, which I would ideally like to avoid, particularly as it does not support IE6/7 browsers.

If a solution can be acheived which uses JavaScript to format the DIVs, then I am open to any suggestions anyone may have.

Thanks
R

I'm using a relative-positioned div as a container for an image, which is absolute-positioned. I'm doing this so that the image will automatically scale down to fit inside the containing div (nothing else I've tried has done this for me- so if there is another way to achieve this, please fill me in). This part works fine, but the image isn't as wide as the containing div, so I would like to center the image inside the div- but I can't seem to get it to work.
I tried the obvious text-align:center in the div. That actually worked... kinda. The image's left-side was in the center of the div, but obviously isn't the 'centering' that I'm looking for. I then tried setting margin-left and margin-right on the image to auto, and that did nothing.
I suspect that the fact that I have my image absolute-positioned is the culprit here, but I don't know how to get around it- or IF I can get around it without drastically changing my approach.

Admittedly, the container div resides inside a table cell. I know that isn't the best practice, but I spent so much time trying a div-only approach only to waste time and become frustrated that I went back to what I know works- at least for now. I tried removing the container div from the table and inserting the image directly to the table cell- but encountered more issues with the sizing of the image.

Essentially, my code is something like this:

CSS:
Code:

td#CONTENTDISPLAY
{
  width: 100%;
  height: 100%;
  text-align: left;
  vertical-align: top;
  padding: 0 0 0 0;
  margin: 0 0 0 0;
}

div#CONTENTBANNER
{
  position: relative;
  height: 100%;
  padding: 0 0 0 0;
}

img.CONTENTIMG
{
  position: absolute;
  height: 100%;
}

HTML:
Code:

...
  <td id="CONTENTDISPLAY">
    <div id="CONTENTBANNER">
      <img class="CONTENTIMG" />
    </div>
  </td>
...

Nothing flashy, I know. One thing I should mention, however, is that the image is ALWAYS placed inside the container div using a Javascript function (it's a dynamic image). I doubt that makes a difference, but I figure it's worth mentioning.

Can anyone help point me in the right direction?

Thanks!

- skubik