'Make other div not have its flow altered by a floated div

I have a page with a float: right'ed div at the top, and a text-align: center'ed div right underneath it. Is it possible to make the floated div not alter the flow of the other div (the one right below it)?

Here are two fiddles that show what I'm seeing (I like neither, they are explained in the next paragraph):
off-center -> http://jsfiddle.net/5XMVt/
centered but gaping hole -> http://jsfiddle.net/CSGQn/

If left alone, the bottom div is pushed left (out of the center) by the floated div. I could do clear: both on the bottom div but that would push it down below the floated div, and even though this is better than being off-center, it's suboptimal because it creates a giant hole right above it. I need the floated div not to alter the flow of the div below it at all, like it's not even there.

I was also thinking about doing position: absolute; but that would only work if the div were supposed to be on the left side, when it's supposed to be on the right side.

What I would like is like the first fiddle except with the 'should be centered' text actually centered.

htmlcsscss-float


Solution 1:[1]

You can set the right-floated div with position:absolute

And set the right:0, that will give it the same behavior as floating it to the right.

Note that this will only work if the div has to be at the right of the page, not a container.

Solution 2:[2]

i think you can do it this way http://jsfiddle.net/5XMVt/4/

or you can use position absolute for the .floating class, and set the right:0px

Solution 3:[3]

Yes, why not you have something like that:

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

With the following style:

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

That ought to do it :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 willvv
Solution 2 yoel
Solution 3 Vern

Related Questions