Wrap text around both sides of div

Question

Here is what I try to achieve:

With the following HTML:

<div id="my1"> 
<p> some text </p>  
<div id="wrap">Awesome content</div>  
</div>  

Having this:

text text text text text text text text text text text text text text  
text text text text text div id="wrap" text text text text text  
text text text text text text text text text text text text text text  

Floating divs didn't help me reaching this result so far... (considering height and width for both my1 and wrap are known)?

A fiddle where the text starts from the right side of the wrapped div, when I wish it starts from the left of "my1" div, breaks around "wrap" div. http://jsfiddle.net/matmat/dxV4X/

Answer 1

<div id="my1">
    <p>some text some text
       <span id="wrap">wrapped text</span>
       some text some text</p>
</div>

Should work if I am reading the question correctly? A <div> is a block level element which is breaking, a <span> is inline like what you want.

Fiddle here: http://jsfiddle.net/YbuuH/2/

Answer 2

Use css as below:

wrap { word-wrap:break-word; }

This css should work to wrap the text in a line and to continue on next.

Answer 3

Looks like you want something like float:center ? Well, the problem is that this property doesn't exist.

Here are 2 alternatives:

1) Fake it with pseudo elements - FIDDLE - See this css-tricks article

Set up markup like so:

<div>
    <div id="wrap">Awesome content</div>
    <div id="l">
        <p>left text here</p>
    </div>
    <div id="r">
        <p>right text here</p>
    </div>
</div>

With CSS

#wrap {
    width:250px;
    height: 250px;
    background: yellow;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
}
#l {
    float: left;
}
#r {
    float: right;
}
#l, #r {
    width: 49%;
}
#l:before, #r:before {
    content:"";
    width: 125px;
    height: 250px;
}
#l:before {
    float: right;
}
#r:before {
    float: left;
}

Alternative #2 (IE 10+ only): CSS Exclusions - FIDDLE

Markup

<div class="container">
    <div class="exclusion">Awesome content which floats in the center</div>
    <div class="dummy_text">all the text here</div>
</div>

CSS

.container {
    font-size: small;
    background: aqua;
    position: relative;
}
.exclusion {
    background-color: lime;
    -ms-wrap-flow: both;
    -ms-wrap-margin: 10px;
    z-index: 1;
    position:absolute;
    left:0;right:0;
    top:0;bottom:0;
    width: 150px;
    height: 100px;
    background: yellow;
    margin: auto;
}

For more info about CSS exclusion browser support and further resources see my answer here.