CSS dynamically center div beside centered element

I 开发者_开发知识库have a a design problem. I have a centered logo on a page, What I want is a div centered between the left side of the page and te left side of the logo.

how could I achieve this using only css ?

Here is the example:

Take a look at this demo...

http://jsfiddle.net/UnsungHero97/7Z5fu/

HTML

<div id="wrapper">
    <div id="box-left">
        <div id="left"></div>
    </div>
    <div id="box-center">
        <div id="center"></div>
    </div>
</div>

CSS

html, body {
    margin: 0 !important;
    padding: 0 !important;
}

#wrapper {
    width: 100%;
}

#box-center, #box-left {
    width: 50%;
    float: left;
}

#left {
    border: 1px solid magenta;
    height: 50px;
    width: 50px;
    position: relative;
    left: 50%;

    /* half of width of #left + half of margin-left of #center */
    margin-left: -75px; /* 50/2 + 100/2 = 25 + 50 = 75 */
}

#center {
    border: 1px solid magenta;
    height: 50px;
    width: 200px;
    margin-left: -100px;
}

I hope this helps.

It will work if the logo width can be fixed, here’s the code.

HTML:

<div id="logo"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>

<div id="otherdiv"><img src="https://encrypted.google.com/images/logos/ssl_logo.png"></div>

CSS:

#logo {
        width: 100px;
        height: 50px;
        position: absolute;
        top: 50px;
        left: 50%;
        margin-left: -50px;
        text-align: center;
    }

    #otherdiv {
        text-align: center;
        position: absolute;
        top: 50px;
        left: 0;
        width: 50%;
        margin-left: -50px; /* Half of the logo width */
    }

    #logo img,
    #otherdiv img {
        width: 100px;
    }

    #otherdiv img {
        margin-left: 50px; /* Half of the logo width */
    }

Here i have separate two divs that left and right, there is one div inside of the leftDiv that is X_div make it as width:20% and margin:0 auto. if resolution extend, x_div will also extend as per your requirement.

#leftDiv {
width:30%;
height:auto;
}


#leftDiv X_Div {
width:20%;
height:auto;
margin:0 auto;
}


#rightDiv {
width:70%;
height:auto;
}