Wrap text around both sides of the div

Question

Here is what I am trying 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 divdid not help me achieve this result ... (given the height and width for my1 and wrap are known)?

The violin where the text starts on the right side of the wrapped div, when I want it to start to the left of the "my1" div, breaks around the "wrap" div. http://jsfiddle.net/matmat/dxV4X/

Answer 1

Looks like you want something like float: center? Well, the problem is that this property does not exist.

Here are two alternatives:

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

:

<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>

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;
}

№ 2 ( IE 10+): CSS - FIDDLE

<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;
}

CSS . .

Answer 2

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

, ? A <div > - , , a <span> , .

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

Answer 3

css, :

wrap {word-wrap: break-word; }

css , .