Question

I have done up a page for eBay, I have tested it in Explorer, Safari, Firefox, and all is well. But for some reason when I dump the code into eBay and preview it, the page is rendered off to the left hand side. I have tried all manner of searches with different types of CSS, but I have been unable to find a solution. Hence I am here. Can someone please shed some light on what the hell I am doing wrong.

Thanks in advance.

    <style type="text/css">
    body {
        background-color: #FFF;
        text-align:justify;
        font-size:13px;
    }

    #container { 
        width:730px; 
        margin: 0 auto;
        font-size: 14;
        text-align:justify;
    }

    img{
        border:0;
    }

    a img {
        border:none;
    }

    p { padding: 0 15px 0 15px }

    .banner img{ padding: 0 5px 5px 5px; }

    #jerseyBio{
        width:730px;
        margin-bottom:5px;

    }

    #jerseyBio ul {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 16px;
        font-style: normal;
        padding: 25px;
    }

    #jerseyBio ul li{
        margin-bottom:10px;
        padding: 0px;
    }

    #itemPhotos{
        width:730px;
        margin-bottom:5px;
    }

    .leftSplit{
        width:360px;
        left:0px;
        float: left;
        padding: 0 0px 0px 10px
    }

    .rightSplit{
        width:360px;
        right:0px;
        float: left;
        padding: 0 0px 0px 0px
    }

    #itemPhotos img{
        padding-bottom: 15px;
    }

    #sizeChart{
        padding-bottom:0px;
        margin: 0;
    }
  </style>

Answer 1

There are many ways you can center an element in its parent container:

1. Using margin: auto; trick is the easiest way.

2. Using absolute positioned object, with determined height and width, inside a relatively or absolutely positioned parent:

    #parent {position: relative;}
    #child 
    {
         position: absolute; 
         height: 300px; 
         width: 300px; 
         top: 0; 
         right: 0; 
         bottom: 0; 
         left: 0; 
         margin: auto;
    }
   

3. Using 50% margin for objects with unknown width and height.