Placing a sidebar div next to a centered div

Question

I found many variations of this question in SO, but it seems that no matter what I try, I cannot get this (seemingly very simple!) Thing that works!

What I'm trying to do is keep the “centered” div in the center of the viewport and place the “sidebar” of the div right right (that is, it does not align with the right of the viewport) without affecting the centering of the “centered” div .

Here are some jsfiddle test codes:

http://jsfiddle.net/6wCyr/13/

Everything I read seems to imply that the float property is exactly what I'm looking for, but the results in the link show that I get weird results in which the right sidebar is placed below

div , not next to it. This is what is shown in the link.

I also saw a solution that used a negative value for the right property , and set the width of the sidebar to exactly, but I could not understand what was happening.

Hopefully this issue is as easy to resolve as I think it should be! It just cannot find the correct set of divs inside a div , etc. It's hard to debug these alignment problems!

Thank!

Answer 1

.

http://jsfiddle.net/DOSBeats/6wCyr/16/

.holder {
    margin:0 auto;
    width:100px;
}

.centered {
    border: dashed;
    float:left;
    height: 100px;
}

.sidebar {
    border: dotted;
    float:left;
    margin-right:-100px;
    width:100px;
}

Answer 2

Live Demo

• div.sidebar div.centered.
• position: relative div.centered.
• .
• div.sidebar.

CSS

div.centered {
    margin-left: auto;
    margin-right: auto;
    border: dashed;
    width: 100px;
    height: 100px;
    position: relative
}

div.sidebar {
    border: dotted;
    position: absolute;
    top: 0;
    left: 100%
}

HTML:

<div class="holder">
    <div class="centered">
        CENTERED
        <div class="sidebar">
            RIGHT SIDEBAR
        </div>
    </div>
</div>

Answer 3

If you do not set the width of your holder and do not center it, the side panel will float to the edge of the window.

Try the following:

HTML:

<div id="holder">
<div id="sidebar">Sidebar</div>
<div id="centered">Centered</div>
</div>

CSS

#holder{
  margin:auto;
  width:500px;
}
#sidebar{
  border:dotted;
  float:left;
  width:100px;
}
#centered{
  border:dashed;
  margin-left:110px;
  width:380px;
}