Skip to content

Instantly share code, notes, and snippets.

@ClementParis016

ClementParis016/index.html

Created November 23, 2016 11:33
Show Gist options
  • Save ClementParis016/06f94e4caaa3e737d41e313cb597e9f7 to your computer and use it in GitHub Desktop.
Save ClementParis016/06f94e4caaa3e737d41e313cb597e9f7 to your computer and use it in GitHub Desktop.
Download ZIP
Avoid text wrapping around floatted image
Raw
index.html
<div class="container">
<img class="floatted-image" src="http://placehold.it/350x150" alt="Dummy image">
<p class="no-wrapping-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus magna elit, a posuere lacus malesuada sed. Fusce ante metus, congue vel odio vitae, eleifend placerat metus. Suspendisse tempus dapibus mauris id faucibus. Curabitur augue erat, aliquet facilisis sem non, ultrices sollicitudin nulla. Etiam condimentum a nisl ut bibendum. Aliquam tellus nisi, ultrices at ligula eget, euismod tempus leo. Donec pellentesque, tortor et fringilla tincidunt, ex neque ullamcorper risus, quis sollicitudin elit nulla a nulla.</p>
</div>
Raw
style.css
.floatted-image {
float: left;
}
/**
* The trick here is to use the overflow property.
* Setting it to 'auto' or 'hidden' prevents the content to wrap
* under the floatted image when it's higher than the image.
* Obviously, that could work with any element (not just a <p>), as long
* as overflow is not used for something else.
**/
.no-wrapping-text {
overflow: auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment