CODEWITHSUNDEEP
htmlcss
yukondude
yukondude

Reputation: 24643

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

Supposing 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 such that I get an effect like that below?

wrapping text divs

From all that I've tried and all that I've read, I'm not even sure such a thing is possible. Floats with negative margins just overlap instead of wrap, and any attempt at absolute positioning would take div B out of the flow and so no wrapping there either.

I want div A to follow div B as a sibling so that the content displays simply on mobile phones or for screen readers. That's why div B isn't a child of div A.

Without resorting to moving div B with JavaScript, is there any CSS slight-of-hand that can achieve the effect. The only thing I can think of is to put an empty space-saving div inside of div A and then reposition div B to be "on top" of it. Is that a valid technique, or I'm I just asking for trouble on different sized browser viewports?

Upvotes: 6

Views: 1538

Answers (3)

yukondude
yukondude

Reputation: 24643

Everyone seems to be in agreement that this sort of thing can't be done with CSS alone. So, I whipped up a short (contrived) solution using jQuery in case it's of help to anyone. 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 omitted the code for hiding div Box-B and not moving div B for small screens. I'd use a CSS media query to hide div B-Box, and when it is hidden, the jQuery code wouldn't do anything with div B.

Upvotes: 1

chongo2002
chongo2002

Reputation: 141

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

Upvotes: 1

simpleb
simpleb

Reputation: 53

Like you mentioned, create a box for the "b"s so the "a"s can wrap around with float.

Upvotes: 0

Related Questions