Question

I’ve found a lot of variations to this question within SO, but it seems no matter what I try I can’t get this (seemingly very simple!) thing working!

What I’m trying to do is to keep the ‘centered’ div in the center of the viewport and to place the ‘sidebar’ div directly to its right (i.e. not right-aligned to the viewport) without affecting the centering of the ‘centered’ div.

Here’s some test code on jsfiddle:

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

Everything I’ve 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 wherein the right sidebar is placed below the ‘centered’ div rather than beside it. That’s what’s shown in the link.

I’ve also seen a solution involving using a negative value for the right property, and setting the width of the sidebar exactly, but I couldn’t get that one going either.

Hopefully this question is as easy to solve as I think it should be! Just can’t seem to find the right set of div inside div and so forth. Hard to debug these alignment issues!

Thanks!

Answer 1

Try this.

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;
}