How to make text wrap above and below a div?


Tags: html,css,layout,css-float

Problem :

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>


Solution :

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/


    CSS Howto..

    How can I absolutely position a related image_tag?

    How to make an overflow hidden only for box-shadow

    gwt - How to CSS reset a GWT app?

    Show span beside select

    Table: how to change pictures on mouseover on single rows?

    How to fix width of DIV that contains floated elements?

    How to Insert Images inside DIV in this case

    How can I simplify this JavaScript code

    How To Adjust CSS List On Hover Image

    Font not showing properly in HTML page

    Right side border gradient only with the newer webkit gradient syntax, also which browsers support this, and how to do it in those as well?

    how to align horizontally using CSS

    How can i Split Menu Bar in two lines

    How to have JavaScript read a value appended with CSS at a given ID

    How to align the inside box to center of the table

    I made a webpage but have excess white space at the bottom, how do I get rid of this?

    How can I use CSS to center text in DIV

    How to achieve parallax behind horizontal bars while scrolling

    Not floating on same line, how to fix css

    How to center an image .logo via css? [duplicate]

    How to automate background width in CSS

    How to make outer div fit child divs?

    How do I get my links to glow on :hover with CSS3? [duplicate]

    How to apply a property only to the submit button

    How to avoid text go below the thumbnail with css

    How to write css fallbacks for vh vw

    how to many class share 1 css method in CSS

    html, how to make elements not shift when browser zooms?

    How To Make Navigation With Images That Is Clickable?

    How do I make elements flow horizontally instead of vertically?