{"id":297310,"date":"2019-11-04T13:15:33","date_gmt":"2019-11-04T20:15:33","guid":{"rendered":"https:\/\/css-tricks.com\/?p=297310"},"modified":"2019-11-04T13:15:33","modified_gmt":"2019-11-04T20:15:33","slug":"float-element-in-the-middle-of-a-paragraph","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/float-element-in-the-middle-of-a-paragraph\/","title":{"rendered":"Float Element in the Middle of a Paragraph"},"content":{"rendered":"

Say you want to have an image (or any other element) visually float left into a paragraph of text. But like… in the middle of the paragraph, not right at the top. It’s doable, but it’s certainly in the realm of CSS trickery!<\/p>\n

<\/p>\n

\"\"<\/figure>\n

One thing you can do is slap the image right in the middle of the paragraph:<\/p>\n

<p>\r\n  Lorem ipsum dolor sit amet consectetur, adipisicing \r\n  <img src=\"tree.jpg\" alt=\"An oak tree.\" \/>\r\n  elit. Similique quibusdam aliquam provident suscipit \r\n  corporis minima? Voluptatem temporibus nulla\r\n<\/p><\/code><\/pre>\n
But that’s mega awkward. Note the alt text. We can’t have random alt<\/code> text in the middle of a sentence. It’s semantically blech<\/em> and literally confusing for people using assistive technology.<\/p>\n
So what we have to do is put the image before the paragraph.<\/p>\n
<img src=\"tree.jpg\" alt=\"An oak tree.\" \/>\r\n\r\n<p>\r\n  Lorem ipsum dolor sit amet consectetur, adipisicing \r\n  elit. Similique quibusdam aliquam provident suscipit \r\n  corporis minima? Voluptatem temporibus nulla\r\n<\/p><\/code><\/pre>\n
But when we do that, we aren’t exactly floating the image in the middle of the paragraph anymore. It’s right at the top. No margin-top<\/code> or vertical translate or anything is going to save us here. margin<\/code> will just extend the height of the floated area and translate<\/code> will push the image into the text.<\/p>\n
\"\"<\/figure>\n
The trick, at least one I’ve found, is to leverage shape-outside<\/code> and a polygon()<\/code> to re-shape the floated area around where you want it. You can skip the top-left part. Using Clippy is a great way to get a start to the polygon<\/a>:<\/p>\n
\"\"<\/figure>\n
But instead of the clip-path<\/code> Clippy gives you by default, you apply that value to shape-outside<\/code>. <\/p>\n
That should be enough if you are just placing a box in that place. But if it’s literally an image or needs a background color, you might also<\/em> need to apply clip-path<\/code> and perhaps transform things into place. This is where I ended up with some fiddling.<\/p>\n
\n  See the Pen 
\n  Float cutout in middle of paragraph.<\/a> by Chris Coyier  (@chriscoyier<\/a>)
\n  on CodePen<\/a>.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"
Say you want to have an image (or any other element) visually float left into a paragraph of text. But like… in the middle of the paragraph, not right at the top. It’s doable, but it’s certainly in the realm of CSS trickery!<\/p>\n","protected":false},"author":3,"featured_media":297854,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[518,1101,1124],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":16577,"url":"https:\/\/css-tricks.com\/minimum-paragraph-widths\/","url_meta":{"origin":297310,"position":0},"title":"Minimum Paragraph Widths in Fluid Layouts","date":"March 26, 2012","format":false,"excerpt":"In fluid width environments, the text that wraps around floated elements can get awkwardly narrow and trap bits of text orphaned away from the rest of the paragraph. This article explains that problem in more details and offers a few solutions.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":596,"url":"https:\/\/css-tricks.com\/run-in\/","url_meta":{"origin":297310,"position":1},"title":"CSS Run-in Display Value","date":"July 29, 2010","format":false,"excerpt":"CSS has a value for the display attribute called run-in. It's like this: h3 { display: run-in; } The point is to allow a header to run into text below it, without sacrificing semantics or running into the problems you might run into trying to force it with other layout\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2010\/07\/runinfloatproblem.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":338290,"url":"https:\/\/css-tricks.com\/float-an-element-to-the-bottom-corner\/","url_meta":{"origin":297310,"position":2},"title":"Float an Element to the Bottom Corner","date":"April 19, 2021","format":false,"excerpt":"Need to lay out an element to the right or the left, such that text wraps around it? That\u2019s an easy task for the float property. But what about if you also want to push that element (let\u2019s call it an image) to one of the bottom corners while we\u2019re\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/04\/float-bottom-corner.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":25,"url":"https:\/\/css-tricks.com\/left-align-and-right-align-text-on-the-same-line\/","url_meta":{"origin":297310,"position":3},"title":"Left Align and Right Align Text on the Same Line","date":"August 8, 2007","format":false,"excerpt":"It can sometimes be useful to have some text be aligned to the left and some text be aligned to the right on the same line. For example, in a footer, where you might want to have copyright info on the left and webmaster info on the right. Here is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":13224,"url":"https:\/\/css-tricks.com\/pseudo-spriting\/","url_meta":{"origin":297310,"position":4},"title":"Pseudo Spriting","date":"July 5, 2011","format":false,"excerpt":"CSS sprites are almost always the way to go when it comes to applying background images with CSS efficiently. One hurdle you may come across is when you want to apply an image that's a part of a sprite to an element with an unknown height and width. We can\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/07\/unknown-single.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":6174,"url":"https:\/\/css-tricks.com\/containers-dont-clear-floats\/","url_meta":{"origin":297310,"position":5},"title":"Why Containers Don’t Clear Themselves","date":"April 12, 2010","format":false,"excerpt":"One of the hurdles (and \"ah-ha\" moments) in learning CSS is this business about clearing floats. If you have no idea what I'm talking about, check out the classic All About Floats. I specifically want to talk about the issues of \"collapsing\", that is, how elements that contain floated items\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/correct-reflow.png?resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297310"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=297310"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297310\/revisions"}],"predecessor-version":[{"id":297855,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/297310\/revisions\/297855"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/297854"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=297310"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=297310"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=297310"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}