How to make text wrap above and below a div?

Question

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>

Answer 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 DIVs.

A solution is better than words: http://www.csstextwrap.com/ give it a shot and you will see what i mean with "several divs".

Answer 2

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/

Answer 3

Maybe not the ideal solution, but if you put your "inset" div in the middle of your text, rather than at the top, and get rid of the top margin it will wrap like you want it to. I do kind of feel that this is a kludge. example

Answer 4

Unfortunately you can not have the text wrap both above and below, its currently a limitations of html. You would have to use several divs and chop up the content to make it look like it is wrapping.

You can only have it wrap to 1 side

Answer 5

I had the same issue, and I built on cope360's answer to have something that doesn't involve adding extra markup. Here's a jsfiddle that essentially does the same thing, but with pure css.

#inset {
    width: 100px;
    height: 100px;
    background: gray;
    float: left;
    clear:left;
}
#container:before {
    content: " ";
    height: 40px;
    width: 0px;
    float: left;
}