No-wrap floats

Very easy solution to stop content from wrapping under a floated element.

by Varun Nath

HTML

<div id="wrap">
    <img class="left" src="http://dummyimage.com/64x64/0088cc/ffffff.gif&amp;text=.img">
    <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
        mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
        vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
        vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
        dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
        elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
        vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
        consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
        porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
        consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
    <img
    class="right" src="http://dummyimage.com/64x64/0088cc/ffffff.gif&amp;text=.img">
        <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Donec id elit non
            mi porta gravida at eget metus. Morbi leo risus, porta ac consectetur ac,
            vestibulum at eros. Donec sed odio dui. Nullam id dolor id nibh ultricies
            vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus
            dolor auctor. Etiam porta sem malesuada magna mollis euismod. Donec id
            elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
            vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed
            consectetur. Nulla vitae elit libero, a pharetra augue. Morbi leo risus,
            porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet,
            consectetur adipiscing elit. Cras mattis consectetur purus sit amet fermentum.</p>
        <img
        class="right" src="http://dummyimage.com/64x64/0088cc/ffffff.gif&amp;text=.img">
           ...

CSS

#wrap {
    margin: 3em 8em;
}
.left {
    float: left;
    margin-right: 1.5em;
}
.right {
    float: right;
    margin-left: 1em;
}
p {
    margin-bottom: 2.5em;
    overflow: hidden; // this is what keep the <p> from wrapping
}
p:last-child {
    overflow: visible; // this is the browser default
}