I have no problem getting text to wrap around a div when tops of the elements are aligned, but I can't figure out how to have the text wrap above and below the div.
For example I want the text to be the full width of #container for 40px, then wrap around it to the right, and then go full width again.
See it at http://jsfiddle.net/cope360/wZw7T/1/. Where I added the top-margin to #inset is where I'd like the text to wrap. Is this possible?
CSS:
#inset {
width: 100px;
height: 100px;
background: gray;
float: left;
margin-top: 40px;
}
HTML:
<div id="container">
<div id="inset">Inset</div>
This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around.
</div>
Here's a solution that gives the rendering I want based on moontear's answer and http://www.csstextwrap.com/.
CSS:
div {
float: left;
clear: left;
}
#inset {
width: 100px;
height: 100px;
background: gray;
margin: 10px 10px 10px 0px;
}
#spacer {
width: 0px;
height: 40px;
}
HTML:
<div id="container">
<div id="spacer"></div>
<div id="inset">Inset</div>
This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around.
</div>
See it at http://jsfiddle.net/cope360/KbFGv/1/
Easy problem, hard solution. You will only be able to wrap the text around on one side using one div, however you may wrap the text using several DIV
s.
A solution is better than words: http://www.csstextwrap.com/ give it a shot and you will see what i mean with "several divs".
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