Two columns of a div layout become centered in the column

Question

In the center of my webpage, I have a div with id center-container that contains 2 divs: one for the video player (left) and the second (right) for an extra thing, such as a playlist. There is other content above and below the central div container.

Now the question. How can I make the video player container in the middle of the page when the playlist is missing (not installed) without stopping the remaining layout.

Answer 1

You can do this with less simple code:

.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/

Answer 2

got it!

http://jsfiddle.net/6y5N4/7/

used it! just remove the contents from the container, which should be optional (like a playlist) and the other container should stretch without problems.