Question

im trying to make a facebook like blue bar.
So, i noticed they make a blue bar with width 100%, and make a new div under it which selects half of the div like this(the light blue part is the new div)

So, then the text or link i put under the new div is alligned just like i want it.
How can i achieve this?
My HTML

    <div class="topBar" >
    <div class="bar_frame">
        fuuu
</div>
    </div>

And here is my CSS

    .topBar {

    background: #3b5998;
    top: 0;
    height: 36px; 
    width: 100%;
    background-position: center;
    position: fixed;

}

.bar_frame{
/* The new div code must go here but i dont know how to do this */
}

Answer 1

This will work. I’m assuming you just need to center a fixed-width div in its parent element? This is exactly how Facebook does it in your example, and this is how it is done in many cases:

.bar_frame{
    width: 981px;
    margin: 0px auto;
}

Demo fiddle