Aligning a Centered Div with a Div to its Immediate Right

Question

I am looking to align two divs such that div a is in the absolute center of the page and div b is to the immediate right of div b. div a is 320 px wide and div b is 42 px wide. It is important that div a is in the center and div b is to div a's right (i.e., div a + div b is not in the center). I cannot seem to get this right and have hit a block.

Below is a rough outline of the page layout.

|-----aaaab----|

Answer 1

You could have a div that is centred, and nest 2 divs within; left and right with the appropriate widths. The HTML would be:

<div class="centred">
    <div class="left"></div>
    <div class="right"></div>
</div>

The style to centre is:

div.centred {
    width: 404px; /* This is 320 + 42 + 42 */
    height: 100%;
    margin-left:auto;
    margin-right:auto;
}

The left div:

div.left {
    width: 320px;
    height: 100%;
    background-color:green;
    float:left;
    margin-left: 42px;
}

And the right:

div.right {
    width: 42px;
    height: 100%;
    background-color:red;
    float:right;
}

This gives you a centred div that is 320px wide (green) and one on the right (red) that is 42px wide.

FYI: If you're looking to align things easily and responsively, have a look at Bootstrap