Question

I used with apprehension the position:absolute; in my container for my template so that I have the center and both sides placed.

However, as I feared, if you happen to want that your website is visited by someone else other than yourself, then don’t use it. This is because absolute position means one thing for you and another thing for someone else with a different monitor screen with different dimensions, right?

I went to another computer to see my web and the box was displaced towards the right?

Am I right in what I am saying?

thank you

here are my containers

#container-center{
  width:630px; /*** Set to = center col width ***/
  height:500px;
  float:center;
  font-size:8px;
  display:inline;
  position:absolute;
    left:450px;
    top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}



#left_container_home{
  width:150px; /*** Set to = center col width ***/

  height:500px;

  font-size:8px;
  display:inline;
  position:absolute;
    left:250px;
    top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */
}


#right_container{
  width:200px; /*** Set to = center col width ***/

  height:500px;
  float:right;
  font-size:8px;
  display:inline;
  position:absolute;
  left:1085px;
  background:#F3F3F4;
  top:80px;

/* \*/
  margin-left:-1px;
/* Hidden from IE-mac */

}

Would this technique be correct? what I have done I mean. I say it because, I dont see how saying “left 450 px ” can be right for me and right for someone else with a smaller screen.

I have modified the header like this, and it has drifted to the left! why would it if I am just telling it margin 0 auto?

#header {


    background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
    font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
    font-size: 10px;
    width: 930px; margin: 0 auto; 
    h2 {color:#ffffff;}



}

Answer 1

Well, no. position:absolute; means it is absolutely positioned in a relatively positioned container. Take the following example:

x { position: absolute; top: 0; left: 0; }

This means it will be placed in the top left corner of it’s parent container, if that has position:relative;. However, if it does not, it will keep travelling up the DOM tree, untill it finds one that does. If noone does, it will be placed in the top left corner of the document (body).

Read more on CSS positioning here:

• https://developer.mozilla.org/en-US/docs/CSS/position
• http://docs.webplatform.org/wiki/css/properties/position
• http://www.quirksmode.org/css/position.html

In your specific example, I think you are looking to simply center something. The best way to achieve that, is not with position: absolute;, but with wrapping your content in a container with a set width, and apply auto margins, like so:

.wrap { width: 920px; margin: 0 auto; }

This means it has a fixed width, and use the share the remaining space on both sides equally as margin.