Question

Currently I have two div boxes 1 & 2 with text, inside a 3rd div box to contain them together.

Sometimes text in box 1 is longer than text inside box2 – I want text to flow around box2.
Sometimes text in box 2 is longer than text inside box1 – I want text to flow around box1.

All the while text flows in one direction Right or Left, depends on Float settings.

How can box with more text surround box with lesser text?

How is that done using CSS?

Thanks!

Answer 1

Because they are in two divs they are not able to flow around each other because divs can only have 4 sides, being rectangular or square, they cant wrap around each other.

What you would need to do is only have one inner div, fill it with text and float it, then have the other text outside the floating div but still inside the outermost div, so that basically the free-flowing text’s parent is the outermost div, and the inner div has it’s own text inside.

This will allow the outer text to flow around the inner div and it’s contents, but theres no way to have 2 divs and automatically have them wrap around each other based on content length.

Edit:

If you use jQuery, you will be able to first set the two texts in hidden elements, have the content measured and then append the shorter content to the inner div and the longer content to outside that div so it wraps around it.