Two column DIV layout becomes one column center aligned

Question

In the center of my webpage I have a div with id center-container which contains 2 divs: one for a video player(on the left) and the second one (on the right) for an optional thing like playlist. Above and below the center-container div I have another content as well.

Now the question. How can I make my video player container to come to the middle of the page when the playlist div is absent (not set) without braking the remaining layout.

Answer 1

You can do this with less & simple code like this:

.playlist{
    width:100px;
    height:100px;
    float:right;
    background:blue;
    margin-right:20px;
}
.playlist + .video{
    width:200px;
    height:100px;
    margin-left:20px;
    background:green;
    float:left;
}
.video{
    width:200px;
    height:100px;
    margin:0 auto;
    background:green;
}

http://jsfiddle.net/qcTSt/