a aa aaa a aa aaa a aa aaa ...">
Geek Answers Handbook

How do you wrap one text div around another that follows a brother in the DOM?

Suppose I have this HTML:

<div id="a"> a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa </div> <div id="b"> b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb </div>

Using CSS, how can I wrap div A around div B to get this effect below?

wrapping text divs

Of everything that I tried, and everything that I read, I’m not even sure that this is possible. Negative margin floats simply overlap instead of wrapping, and any attempt at absolute positioning will result in div B getting out of the stream, and therefore there will be no wrapping.

I want div A to follow div B like a brother, so that the content is displayed simply on mobile phones or for reading from the screen. This is why div B is not a child of div A.

Without resorting to moving div B with JavaScript, is there any CSS way that can achieve the effect. The only thing I can think of is to put an empty div in the div div from div A, and then move div B to the “top”. Is this the right technique, or am I just asking about problems in viewports of different sizes?

+6
source share
3 answers

It seems that everyone agrees that this kind of thing cannot be done with CSS alone. So, I hacked a short (far-fetched) solution using jQuery if anyone else helped. You can also see the results at http://jsfiddle.net/qadJB/

 <!DOCTYPE html> <html> <body> <div id="a"> a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa <div id="b-box"></div> a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa a aa aaa </div> <div id="b"> b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb b bb bbb </div> <style> div { font-family: consolas; } #a { margin-left: 5em; width: 18em; } #b-box { border: 1px solid #eee; float: left; height: 3.25em; width: 10em; margin: 0.5em; margin-left: -4em; } </style> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function() { var boxPos = $('#b-box').offset(); $('#b') .css('position', 'absolute') .width($('#b-box').width()) .css('top', boxPos.top + 'px') .css('left', boxPos.left + 'px'); }); </script> </body> </html>

EDIT: To keep things simple, I skipped the code to hide the Box-B div and didn't move the div B for small screens. I would use a CSS media query to hide the B-Box div, and when it's hidden, jQuery code won't do anything with div B.

+1
source

To answer your question, this can be done using css, the answer is no. But you can do it with jQuery and css. JQuery will take care of different sizes of viewports, etc.

+1
source

As you already mentioned, create a field for "b" so that "a" can be wrapped with float.

0
source

More articles:


All Articles