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/

Your question is not very clear. Please reword and better describe what you want to achieve. You could also setup a fiddle to help us see your code better. thank you — b_uk_happy, May 26 '14 at 08:53
Here's a fiddle that is not working: http://jsfiddle.net/matmat/dxV4X/ I wish that the text starts left, and wraps around the grey box — TheJohnCalaganProject, May 26 '14 at 09:34

score 6 · Answer 1 · edited May 23 '17 at 12:23

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

enter image description here

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

enter image description here

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.

score -1 · Answer 2 · answered May 26 '14 at 08:52

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

answered May 26 '14 at 08:52

supakeen

2,876
19
19

Thanks, but this is not what I want. The wrapped div can contain various hmtl content. – TheJohnCalaganProject May 26 '14 at 09:18

score -1 · Answer 3 · edited Jun 20 '20 at 09:12

-1

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.

edited Jun 20 '20 at 09:12

Community

1
1

answered May 26 '14 at 09:17

SonaliM

1
1