Question

I can center align 1 div in a page easy just by using the CSS,

margin: auto;

This works great but I am having a problem when I want to keep this div center aligned, but also have another div in line to the left.

This is what I would like http://jsfiddle.net/E25JV/20/ but have the 2 div’s lined up together. (I am only using text in the div’s to keep in simple but there is actually a canvas and a bunch of other stuff).

I have tried floating one div to the left but I get http://jsfiddle.net/E25JV/21/. As you can see they are not exactly lined up and the 1 div that is supposed to be in the center has moved over to the right.

How can I get 2 div’s lined up with 1 div in the center and 1 on the left.

EDIT:

The example I gave was just 2 div’s with text to keep it simple. What I actually have is a canvas inside 1 of the div’s -> http://jsfiddle.net/E25JV/38/.

Answer 1

http://jsfiddle.net/E25JV/73/

#left {
    font-size: 14;    
}
#center {
    text-align: center;
    margin-top: -20px;
}
#canvas {
    margin: auto;
    display: block;
    background: black;
}

​

​