Размещение боковой панели div рядом с центрированным div

Question

Я нашел много вариантов этого вопроса в SO, но, кажется, что бы я ни пытался, я не могу заставить эту (на первый взгляд, очень простую) вещь работать!

То, что я пытаюсь сделать, - это сохранить «по центру» div в центре области просмотра и поместить «боковую панель» div непосредственно на еевправо (т. е. не выровнено по правому краю области просмотра) без влияния на центрирование по центру div .

Вот некоторый тестовый код на jsfiddle:

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

Кажется, все, что я прочитал, подразумевает, что свойство float это именно то, что яЯ ищу, но результаты в ссылке показывают, что я получаю странные результаты, в которых правая боковая панель расположена ниже 'по центру' div , а не рядом с ней.Это то, что показано в ссылке.

Я также видел решение, включающее использование отрицательного значения для свойства right и точную настройку ширины боковой панели, но я не смогпусть это тоже будет.

Надеюсь, этот вопрос так же легко решить, как я думаю, и должно быть!Просто не могу найти правильный набор div внутри div и так далее.Трудно отладить эти проблемы выравнивания!

Спасибо!

Answer 1

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 2

Попробуйте это.

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 3

Если вы не установите ширину держателя и не отцентрируете ее, боковая панель переместится к краю окна.

Попробуйте это:

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