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 to make background image stretch vertically

    I can't figure out how to get display property to work when it comes to multiple div elements

    How can I include an element within a div without using html?

    How to uncover an image with css and jQuery

    How to make the footer stick to the bottom?

    How can I place rotated text against a table with HTML and CSS?

    How to change when Jquery edits my CSS upon reaching an anchor point?

    CSS how do you stretch to fit and maintain the aspect ratio?

    How to fix this css float problem?

    How to make an image not overlap navigation bar in CSS/HTML [closed]

    How to include a font .ttf using CSS?

    How to put logo on navigation bar

    How do I design my CSS with ASP.NET MVC?

    In javascript, how to get a class name from a td cell?

    how to make labels and button appear only when mouse is over a div in asp.net C#

    CSS(3): How to display elements after each other

    How to set the overall Grid thumbnail height to be equal?

    How to get Mouse Out effect in CSS

    how to create a css translateY on hover effect

    How to get the root directory of wordpress in css

    How to remove blue border around the button in Firefox?

    How can I transcend my confusion over CSS?

    How to add CSS Hack specifically for IE10?

    How do I properly set width to a percentile and keep a min-width in pixels?

    I can't figure out how to stop the margin-top from making my child div overflow its parent

    How to have a css element with transitions except initially?

    How to use window height in css using jquery

    How to re-size inputs for a <%= form_for %> form in Ruby on Rails

    How to float elements in rows.

    CSS : How to give different spacers within the same navigation menu