CSS Center

[sseeley]

Can anyone help me?  I am trying to place an object 50px left of center.  This will help me cope with the varying screen sizes.

 

Can any one help me with this code.  I am hoping to use a div?

 

Many thanks in advance

 

Stuart

[peranha]

#left { 
margin-left: -50px; 
}

 

Something like that will work.

[haku]

It's not the easiest thing to do. You probably have to trick the system into it like this:

 

<div id="container">
  <div id="item_to_be_offcenter">div contents</div>
</div>

 

Then you can set the CSS like this:

#container
{
  width: 300px; 
  margin: 0 auto;
}
#item_to_be_offcenter
{
  margin-left: -50px;
}

 

This code creates a container that is centered, holding the items that are to be off center by 50 px. A negative left margin is then used to move the contents to 50 px off the center.

 

 

[TheFilmGod]

If the div you are centering will be going into a parent div that has a fixed width and the width will not be changing - you could just calculate the margin-left and apply a margin-left to trick the system. Only 1 div needed.