0

I have an html web page and I have a table inside this page. I am trying to place it in a certain distance around the middle. (I have a little alien creature as a background image that looks as if he's holding this table). I have used absolute positioning and did for example:

Top: 20% and Right:10%.

When I upload the webpage, it's located in one spot on one monitor then when I use a bigger screen monitor, the table is in a different spot. How do I prevent this from happening so no matter how big the monitor is; the table still be in one location no matter what? My webpage doesn't have any scroll bars so everything is on one display without the need to scroll. Maybe I have to use relative or static or fixed positioning? I don't know Thanks for any help

<table style="position: absolute; top:20%; right:10%" width=60% border="1">
ENGR024
  • 307
  • 1
  • 13
  • 33
  • http://stackoverflow.com/questions/5421334/vertical-and-horizontal-align-middle-and-center-with-css – Cubius Apr 11 '14 at 04:22

2 Answers2

2

You should use actual pixel values. Since you are using percentages, it will change depending on the screen size. Also make it relative to the left edge, not the right, unless your image that you are trying to line it up with is floating right.

Do something like:

<table style="position: absolute; top:50px; left:100px" width=100px border="1">
Sam G-H
  • 627
  • 6
  • 17
1

You can use media query for different resolution . Check this out http://css-tricks.com/resolution-specific-stylesheets/

shin
  • 3,491
  • 1
  • 12
  • 17