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

Question

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

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

Если оставить его в покое, нижний элемент перемещается влево (из центра) с помощью всплывающего элемента. я мог бы сделать clear: both на нижнем div, но это будет толкать его ниже плавающего 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;
  }

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