Menu
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?
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?
371
If you've faced the situation when you need to wrap words in a <div>, you can use the white-space property with the "pre-wrap" value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you'll need the word-wrap property.
querySelector('selector'); // wrapping the event form in a row divWrapper = document. createElement('div'); divWrapper. className = 'row'; wrap_single(elementToWrap, divWrapper);
With CSS properties, you can easily put two <div> next to each other in HTML. Use the CSS property float to achieve this. With that, add height:100px and set margin.
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.
93
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.
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With