How to place a div next to a centered div

Question

How I can place a div next to a div that is centered on the page, thus:

.firstDiv {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
}

This centers the div in the middle of the page, but what if I want to add a div right next to it. In this div I would like to have a menu, a quote or something else. I didn't seem to get it to work after trying something with position.

Thanks in advance,

Boris

---

Edit

To clarify what I mean, please look at this picture:

The big square is the 'main' centered div and then I would like a smaller div on the side of it.

Answer 1

I would create your firstDiv as you are and then just put your right column inside the centered div and the position absolute it to the right like the following:

.firstDiv {
  position:relative;

  width:300px;
  height:300px;

  margin: 0 auto;
  background:red;
    
    padding:10px;
}

.right-col {
  position:absolute;
  top:0px;
  left:100%;

  width:100px;
  height:300px;

  background:blue;
  padding:10px;
}

<div class="firstDiv">
    <div class="right-col">
        Menu / Quote
    </div>
    Middle div
</div>

Here is an example: http://jsfiddle.net/QLYDs/

Make sure you have position relative on .firstDiv otherwise the positioning on .right-col won't work properly