Сделайте так, чтобы другой div не изменял свой поток плавающим div

Question

У меня есть страница с float: right 'ed div вверху и text-align: center' ed div прямо под ним.Можно ли заставить плавающий div не изменять поток другого div (тот, что прямо под ним)?

Вот две скрипки, которые показывают то, что я вижу (мне не нравится ни один, они объяснены вследующий абзац):
не по центру -> http://jsfiddle.net/5XMVt/
по центру, но с зияющим отверстием -> http://jsfiddle.net/CSGQn/

Если оставить его в покое, нижний блок сдвигается влево (из центра)по плавающему див.Я мог бы сделать clear: both на нижнем div, но это бы толкнуло его ниже плавающего div, и даже если это лучше, чем смещение от центра, это неоптимально, потому что это создает гигантскую дыру прямо над ним.Мне нужен плавающий div, чтобы вообще не изменять поток под ним, как будто его даже нет.

Я также думал о выполнении position: absolute;, но это сработало бы, только если бы div предполагалосьбыть на левой стороне, когда она должна быть на правой стороне.

То, что я хотел бы, это как первая скрипка, за исключением того, что текст "должен быть центрирован" фактически центрирован.

Answer 1

Вы можете установить плавающий справа div с позицией: absolute

И установите правильное значение: 0, что даст ему то же поведение, что и смещение вправо.

Обратите внимание, что это будет работать, только если div должен быть справа от страницы, а не контейнер.

Answer 2

Я думаю, вы можете сделать это таким образом http://jsfiddle.net/5XMVt/4/

или вы можете использовать абсолютное положение для класса .floating и установить правильное значение: 0px

Answer 3

Да, почему у вас нет чего-то такого:

<div id="container">
  <div id="rightFloat"> you right floated here</div>
  <div id="content"> your text here</div>
</div>

Со следующим стилем:

  #container {

  } 
  #rightFloat {
    float: right;
    width: 200px;
    height: 200px;
    border: 1px solid black;
    margin-right: 10px;    
  }
  #content {
    border: 1px solid black;
    float: right;
    clear: none;
    margin-right: 10px;
  }

Это должно сделать это:)