Question

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:

Answer 1

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.