Block in the lower right corner and text wrap around it?

Question

css

You need to place the block in the lower right corner of the container in such a way that the text wraps around it on the left and at the same time the height of the lines in the container remains unchanged. It only worked for me that the lines were torn.
Sandbox: jsfiddle.net/Wbu5C/

Answer 1

If the blocks are fixed sizes and you can wrap the text in a div, then there is such a not-so-pretty option
http://jsfiddle.net/zPcVE/

Answer 2

add
float: right;
in #botright{}

Answer 3

Oddly enough, I did not figure out how to solve this problem head-on, under your conditions.
If you make float: right, then firstly you need to swap the blocks, the reverse order of the output of elements, it is often forgotten about, and secondly, you will need to somehow lower the block to the bottom corner. What's the problem, because if you make it margined, then the text will not wrap around.
Then we have a bunch of hacks, depending on your task.
If it's just a drawn corner, then it's best to set it to background-position:bottom right.
Or you can set the container to an absolute, then you can use right: 0 and bottom: 0, giving the red square an absolute too. True, there will still be no flow.
Now I'll think about it.

Answer 4

down can be lowered with a negative margin

Answer 5

Recently I came across a similar one, as an option - add positioning - jsfiddle.net/PnCuK/

Answer 6

If you know the height of the container, then you can try to do it like this: jsfiddle.net/Gh5YN/3/.
You need to set the height of the right side = container - the height of the lower right block.
If it changes, then add JS.