DIV next to centered div

Question

body {
    background: rgba(0, 0, 0, 0.8);
    font-family: sans-s         


        

Answer 1

I imagine there are quite a few approaches you can take. Here is one.

Using the same HTML structure as in your example, the goal can be achieved thus:

• Make all elements except the main wrapper inline-block.
• Center the "centered" element by giving text-align: center to the main wrapper.
• Put the sidebar out of the document flow by giving it position: absolute. This requires that you give its container position: relative as well.
• Give the sidebar's container zero width and height so that it doesn't affect the centering calculations. Give it vertical-align: top so that its top edge (which is also the sidebar's top edge) aligns with the top edge of the centered element.
• Optionally specify text-align for the centered element and the sidebar if you don't want their contents to be centered within themselves.

As a bonus, with this approach you can directly specify the widths for both the centered div and the sidebar in just one place.

See it in action.