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.
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.