{"id":9048,"date":"2011-04-18T05:10:16","date_gmt":"2011-04-18T12:10:16","guid":{"rendered":"http:\/\/css-tricks.com\/?p=9048"},"modified":"2011-08-20T16:13:41","modified_gmt":"2011-08-20T23:13:41","slug":"float-center","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/float-center\/","title":{"rendered":"Faking ‘float: center’ with Pseudo Elements"},"content":{"rendered":"

Let’s say you want to make a layout like this:<\/p>\n

\"\"<\/p>\n

That’s reasonable right? Especially if your article was about cats liking to be the CENTER of attention. GET IT?! (Kitten via PlaceKitten<\/a>).<\/p>\n

Well this isn’t particularly easy to do. Our current layout methods aren’t really built with this in mind. In fact sometimes they feel like they don’t really have “web design” in mind. AM I RIGHT? Even the bleeding edge CSS layout systems I don’t think would handle this very well. This is a little bit like float<\/code>, as the text wraps around the image, but the text wraps around both directions, so it would be a bit like float: center;<\/code> or float: both;<\/code> which don’t exist. <\/p>\n

But this is doable! Proof:<\/p>\n

View Demo<\/a>   Download Files<\/a><\/p>\n

We’re going to do it by using floated pseudo element placeholders. We’ll put one in each column of text1<\/sup>, one floated left, one floated right. The pseudo element should be the height of the image, and half of the width (or so… remember you’ll want some padding and there is the gutter to factor in).<\/p>\n

Essentially:<\/p>\n

#l:before, #r:before { \r\n  content: \"\"; \r\n  width: 125px; \r\n  height: 250px; \r\n}\r\n#l:before { \r\n  float: right; \r\n}\r\n#r:before { \r\n  float: left; \r\n}<\/code><\/pre>\n
\"\"<\/p>\n
Now there is a hole in the text ready to place our image there. We could do that by absolute positioning it there, as in the demo. Or you could just leave it in an element above, centered, and use negative top margin on the columns to pull the text up around.<\/p>\n
\n
1<\/sup> Note we’re using div’s for the columns of text, not CSS columns<\/a>, which would be cooler and more semantic, but it’s not going to happen.<\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
Using a couple of floated pseudo elements on the elements containing columns of text, we can knock out a part in the middle making it look like text is wrapping around an image both directions.<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":338290,"url":"https:\/\/css-tricks.com\/float-an-element-to-the-bottom-corner\/","url_meta":{"origin":9048,"position":0},"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":795,"url":"https:\/\/css-tricks.com\/all-about-floats\/","url_meta":{"origin":9048,"position":1},"title":"All About Floats","date":"July 8, 2009","format":false,"excerpt":"Float is a CSS positioning property. To understand its purpose and origin, we can look to print design. In a print layout, images may be set into the page such that text wraps around them as needed. This is commonly and appropriately called \"text wrap\".","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/print-layout.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":153033,"url":"https:\/\/css-tricks.com\/arranging-elements-top-bottom-instead-left-right-float\/","url_meta":{"origin":9048,"position":2},"title":"Arranging Elements from Top to Bottom instead of Left to Right (float: down?)","date":"October 15, 2013","format":false,"excerpt":"Reader Marcin A wrote in with this question about a simple unordered list in which they wanted the elements to be arranged in vertical order (top to bottom) instead of horizontal (left to right). So markup like: 1 2 3 4 5 6 Which would end up like: 1 4\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":317525,"url":"https:\/\/css-tricks.com\/bold-on-hover-without-the-layout-shift\/","url_meta":{"origin":9048,"position":3},"title":"Bold on Hover… Without the Layout Shift","date":"July 27, 2020","format":false,"excerpt":"When you change the font-weight of a font, the text will typically cause a bit of a layout shift. That's because bold text is often larger and takes up more space. Sometimes that doesn't matter, like a vertical stack of links where the wider\/bolder text doesn't push anything anyway. Sometimes\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/bold-no-shifty-shift.gif?fit=600%2C300&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305723,"url":"https:\/\/css-tricks.com\/using-css-to-set-text-inside-a-circle\/","url_meta":{"origin":9048,"position":4},"title":"Using CSS to Set Text Inside a Circle","date":"April 14, 2020","format":false,"excerpt":"You want to set some text inside the shape of a circle with HTML and CSS? That\u2019s crazy talk, right? Not really! Thanks to shape-outside and some pure CSS trickery it is possible to do exactly that.\u00a0 However, this can be a fiddly layout option. We have to take lots\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/text-inside-circle.png?fit=1200%2C756&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":333934,"url":"https:\/\/css-tricks.com\/is-css-float-deprecated\/","url_meta":{"origin":9048,"position":5},"title":"Is CSS float deprecated?","date":"February 11, 2021","format":false,"excerpt":"An interesting conversation came up at work the other day: Should we use the CSS float property now that we have CSS Grid and Flexbox? The short answer No! Well, mostly. I\u2019d only use it today for wrapping text around images, though and I\u2019d avoid using float entirely for layouts.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/10\/floaty-float-floats.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9048"}],"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=9048"}],"version-history":[{"count":17,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9048\/revisions"}],"predecessor-version":[{"id":13725,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/9048\/revisions\/13725"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=9048"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=9048"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=9048"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}