Wrapping text over and around a DIV

Question

How do I "kill" the space in the top left corner of this example and actually have the 'text text text' use that space, effectively wrapping over and around the placeholder div?

example of current (non-working) code: http://jsfiddle.net/bYZHd/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #parent
        {
            background-color: Orange;
            height: 600px;
            width: 600px;
        }

        #placeholder
        {
            background-color: Navy;
            height: 500px;
            width: 100px;
            position: relative;
            top: 100px;
            left: 0px;
            float: left;
            display: inline-block;
        }
        #content
        {
            display: inline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="parent">
            <div id="placeholder"></div>
            <div id="content">
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            </div>
        </div>
    </form>
</body>
</html>

graphic of what I want: enter image description here

Jaspreet Chahal · Answer 1 · 2012-02-14T01:04:10.800

1

I've updated your jsfiddle code

is this what you were looking for

http://jsfiddle.net/bYZHd/3/

To do this you will need to move your placeholder inside the content DIV if you want to keep your existing CSS

Or you can position your placeholder absolute like shown below

http://jsfiddle.net/bYZHd/4/

edited Feb 14 '12 at 01:04

answered Feb 14 '12 at 00:57

Jaspreet Chahal

2,759
1
15
17

This pushes the placeholder down out of the parent container; the placeholders position should be fixed and the text should wrap over and around it. – codechurn Feb 14 '12 at 01:07
which browser are you using to test this? – Jaspreet Chahal Feb 14 '12 at 01:11
IE9; however ideally it should also work in Webkit based browsers (Safari, FireFox, Chrome) – codechurn Feb 14 '12 at 01:19
ahh Ok. Because I was testing on Chrome and FF where it works. IE9 is just a pain in A**. Let me check it on IE9 to see how I can improve on my solution – Jaspreet Chahal Feb 14 '12 at 01:38
Both of your examples look the same way in FF10 as they do in IE9. The first example pushes the placeholder down; the second puts the place holder over the text. Thanks for trying, but neitehr one wraps the text over and around the placeholder. – codechurn Feb 14 '12 at 01:46

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

I've done a little more research on this question and have come up with an alternate answer.

The answer I'm using comes from here, but a more comprehensive list of possible solutions can be found from this Stack Overflow question. First though, verify that I've done what you wanted. http://jsfiddle.net/bYZHd/7/

I used the solution involving a "pusher" element. Place an empty div outside the parent buffer, give it a height, float it to the left and clear it. Then the placeholder element won't have to adjust its positioning.

In general, wrapping text above an element is not easy to do in CSS. The answer given in the link mentions having to manually adjust the height of the pusher element using JS. But in your case, you know exactly how far you want your placeholder to be from the top, so you can just hardcode the height.

Below is an example of the edited code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        #parent
        {
            background-color: Orange;
            height: 600px;
            width: 600px;
        }

        #buffer
        {
            float: left;
            height: 80px;
        }
        #placeholder
        {
            background-color: Navy;
            height: 500px;
            width: 100px;
            position: relative;
            top: 0px;
            left: 0px;
            float: left;
            clear: left;
            display: inline;
        }
        #content
        {
            display: inline;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div id="buffer"></div>
        <div id="parent">
            <div id="placeholder"></div>
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text text text text text text
        </div>
    </form>
</body>
</html>

This is exactly what I was looking for! It does exactly what I want it to do. — codechurn, Feb 16 '12 at 01:43

score 0 · Answer 3 · answered Feb 14 '12 at 01:02

0

Your placeholder is currently using position:relative. What this means is that the placeholder is theoretically occupying the top-left most position of your web page. Then the placeholder position is offset from its original position by 100px. But the rest of the elements on the page won't change to wrap around.

What you want is to change position to absolute. This will do what I think you'll want it to do.

http://jsfiddle.net/bYZHd/2/

answered Feb 14 '12 at 01:02

Roman

176
3
10

I did something very similar, however you will notice that the text no longer wraps around the placeholder because it is now out of the document flow. – codechurn Feb 14 '12 at 01:08

Wrapping text over and around a DIV

3 Answers3