Как расположить элемент рядом с другим элементом неопределенной позиции?

Если вы хотите .xyz внутри #wrap, но с правой стороны, выполнение float:right; на вашем .xyz элементе приведет к тому, что вы хотите.

РЕДАКТИРОВАТЬ: попробуйте что-то вроде этого:

<div class="wrap">
     <div class="shuffle"><my shuffle img></div>
     ......Other stuff......
</div>

затем css мудрый:

.wrap{position:relative;overflow:visible;}
.shuffle{position:absolute;right:100px;}

Обновлено для современного CSS:

Если вы работаете в одном измерении, например, в режиме просмотра телефона (где все в основном вертикально) или панели навигации (где все в основном горизонтально), используйте модуль Flexible Box.

Настройте свой контейнер для отображения: flex; и flex-flow: row; или столбец; в зависимости от того, в какую сторону вы направляетесь.

Обосновать содержание: пространство вокруг; будет располагать дочерние элементы равномерно с примерно таким же пространством вокруг первого и последнего элемента, как и между каждыми двумя. Если вы хотите, чтобы первый и последний элементы находились на одном уровне с контейнером, используйте justify-content: space-between; вместо.

Элементы выравнивания: гибкий старт; даст вам левое поле, если вы движетесь вниз по столбцу. Если вы перемещаетесь по ряду, ваши предметы будут выровнены по верхнему краю. Выравнивание элементов: по центру; центрирует столбец или строку. Элементы выравнивания: гибкий конец; выстроит столбец справа, что вам нужно, если вы пишете на языке RTL, таком как иврит или арабский, или разместите все элементы строки в нижней строке.

Если вы создаете горизонтальное меню из текстовых элементов, вы можете попробовать align-items: baseline; и выровняйте весь этот шрифт по фактической базовой линии используемого вами шрифта.

Что, если вы работаете в двух измерениях?

Тогда используйте CSS-Grid!

Рэйчел Эндрю, редактор журнала Smashing Magazine, и Джен Симмонс, ныне работающая в Apple и ранее являющаяся защитником разработчиков в Mozilla, вместе и по отдельности опубликовали массу ресурсов (а затем я провел несколько выступлений на WordCamp о том, чему я научился у них).

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

-------------- Ответ от 2013 г. ---------

Мой предпочтительный метод в большинстве случаев - поместить все элементы, которые я хочу, рядом друг с другом в контейнер, а затем поместить все, что осталось. Итак, я собираюсь добавить класс контейнера (я не большой поклонник идентификаторов - они очень ограничивают) к вашим стилям и внесу несколько изменений:

.container  {
  float: left;
  width: 800px;
 }

#wrap { 
  float: left;
  width:550px; 
  background-color:#fff; 
  margin:0 auto; 
  padding:0; 
  border-right:1px solid #ccc;         
  border-left:1px solid #ccc; 
}

#container {
      width: 500px;
      margin:0 auto;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
}
.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

Этот код предоставит вам div .wrap слева и класс .xyz справа с полем в 20 пикселей между ними внутри класса .container.

Не уверен, что вы хотите делать со своим #container ID, основываясь на вашем утверждении, что вы хотите разместить .xyz рядом с .wrap.

Если вы действительно хотите разместить #container в одной строке с другими элементами, также переместите его влево:

.container  {
    float: left;
    overflow: auto;
    width: 1330px;
}

 #container {
      float: left;
      width: 500px;
      margin:0 0 0 20px;
      padding: 25px;
      font-size:.85em;
      background-color: #fff;
 }

.xyz {
    float: left;
    margin: 0 0 0 20px;
    width: 200px;
}

Идентификатор контейнера и класс xyz теперь имеют левое поле в 20 пикселей, а большой контейнер, класс, шире, чем сумма всех div.

Это метод, над которым я работал снова и снова, создавая статические сайты и дочерние темы WordPress (в основном на основе фреймворка Genesis) с тех пор, как я начал писать правильную разметку в 2007 году.