Grow your CSS skills. Land your dream job.

Faking ‘float: center’ with Pseudo Elements

Published by Chris Coyier

Let's say you want to make a layout like this:

That's reasonable right? Especially if your article was about cats liking to be the CENTER of attention. GET IT?! (Kitten via PlaceKitten).

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, as the text wraps around the image, but the text wraps around both directions, so it would be a bit like float: center; or float: both; which don't exist.

But this is doable! Proof:

View Demo   Download Files

We're going to do it by using floated pseudo element placeholders. We'll put one in each column of text1, 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).

Essentially:

#l:before, #r:before { 
  content: ""; 
  width: 125px; 
  height: 250px; 
}
#l:before { 
  float: right; 
}
#r:before { 
  float: left; 
}

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.


1 Note we're using div's for the columns of text, not CSS columns, which would be cooler and more semantic, but it's not going to happen.

Comments

  1. Ooh. Great tip and something different. Makes so much more sense and I have been using more column style layouts given the increase in people buying newer computers with larger screens or others wanting magazine layouts and something a little different than the common single block text.

  2. Permalink to comment#

    Thanks for this great tip! Looks awesome and actually much more natural too!

  3. This is great! You would think there would be something in the spec for doing this more intuitively though. It reminds me in some ways of the sandbag div technique for wrapping text around images.

  4. My favorite “float: center;” technique is to set an element to “display: inline-block;” and set it’s parent to “text-align: center;”. It doesn’t have exactly the same behavior as this example, but it is a very useful technique from time to time.

  5. Permalink to comment#

    very interresting

    thanks

  6. Chris is getting back into real css tricks! Thanks, always a pleasure to learn new techniques.

  7. very clever .. available for the ads, thank you

  8. OMG it doesn’t work in ie 5.5!!!!!!!!!!!!! ASFASDASFASFADSDSF!

    ( Nice tip ;) )

  9. Permalink to comment#

    It’s stuff like these I like the most, fun workarounds that make sense and have a solid base. Nice :)

  10. Ant
    Permalink to comment#

    Hehe, I would never get to it myself.

  11. Permalink to comment#

    With some patience you can get even more interesting float:

    http://rmcreative.ru/blog/post/slozhnoe-obtekanie-tekstom

    • That’s very cool, the ol’ shim technique. Sort of the “point” of this is that pseudo elements mean that the code stays nearly perfectly semantic, no extra elements needed.

  12. I don’t know how many times I have seen someone try to use float:center – you’d think after watching it not work several times they would stop. So, this title caught my attention :)

    Thanks for the tip! The pseudo selectors are pretty awesome and I like seeing different ideas come out on how to use them.

  13. Hey Chris,
    I would not include the image in the markup as it breaks IE6/7. Instead, I’d use it to style both pseudo-elements with a background-image. That way you get the same effect with a nice “fallback” (as the image would not overlap the content).

  14. Permalink to comment#

    Hi Chris, awesome tip. Jaw dropping one :)
    Your site is rightly named CSS-Tricks, presenting awesome and rarest tricks in whole WWW.

  15. Debbie
    Permalink to comment#

    Hey thanks, Chris. I am so excited about this!!! Maybe it’s my print background that has always made me itch for this capability, but I’ve tried to achieve the “center float” many ways and always failed.

    cheers-

  16. Love it! Gives new meaning to the term ‘magazine layout’. ;-)

  17. This looks like a great idea. I have a question on implementation:

    When you have multiple elements to center, would you need to use something like this in your stylesheet with a unique callout for EACH element?

    #element1 #left:before, #element1 #right:before { content: “”; width: 225px; height: 250px; }
    #element2 #left:before, #element2 #right:before { content: “”; width: 225px; height: 250px; }

    Thanks for your advice.

    ~Jeff

    • Actually it makes more sense if the sizing requirements are different:

      #element1 #left:before, #element1 #right:before { content: “”; width: 225px; height: 250px; }
      #element2 #left:before, #element2 #right:before { content: “”; width: 100px; height: 150px; }

    • Sorry, I couldn’t edit my prior comments… so here’s another update to accommodate ‘center floating’ multiple elements:

      For multiple elements you can’t us duplicate ID’s, but have to use classes, so this should work:

      #element1 .left:before, #element1 .right:before { content: “”; width: 225px; height: 250px; }
      #element2 .left:before, #element2 .right:before { content: “”; width: 100px; height: 150px; }

  18. very neat !!, is it IE proof ?

    • It isn’t completely IE proof. I just tested it.
      IE8 and IE9 are doing it good.

      IE7 and lower fail…

      @Chris Coyier
      thanks for the blogpost. Might need this sometime.

  19. Permalink to comment#

    Thanks for sharing that, I’m still in the process of learning all these cool css-tricks and your website is fantastic!

    I look forward to more posts by you :)

  20. Permalink to comment#

    That is a really cool trick. Very simple. As soon as I read “We’re going to do it by using floated pseudo element placeholders.” I knew what you were doing, but without that ‘trigger’ I would never thought of such a method. In fact, I had never even considered such ‘problem’.

    Very nice work!

  21. Love the effect and have tried (unsuccessfully) to re-create the look for IE7 and down. I had thought the inclusion of Dean Edward’s IE7.js would solve the problem but this seems to be having issues currently with the :before and :after selectors so no luck.

    I’ll batter on with my efforts and update here if I have any luck.

  22. I wish we could do this with column-count CSS property.

  23. snilloR
    Permalink to comment#

    Very cool, Chris. I can see a number of opportunities where I’d like to implement this.

    I followed your explanation and code and managed to come up with an OK first try; as soon as I figure out how to include an image here, I’ll share a screenshot of it.

    Thanks for sharing the great concept and clear explanation.

  24. I just stumbled across exactly this Problem – 1 week ago ;)
    I thought how to build this in an cms template.
    Thanks a lot. Will test it, but im sure it will work ;)

  25. Hey!
    We had this problem just the other week. I colleague of mine wanted to do something exactly like this and I told him, that it just won’t be possible.
    But now, when I see the solution for the problem, it seems to be so much easier to solve than I expected!
    Thank you so much for that! :)

  26. I followed your explanation and code and managed to come up with an OK first try; as soon as I figure out how to include an image here, I’ll share a screenshot of it.

  27. Permalink to comment#

    Very good thinks ~~~~

  28. Permalink to comment#

    Great tip, but I was hoping it used css3 columns. Oh well.

  29. Permalink to comment#

    Great tip! ‘float: center;’ has been a long time dream of mine. This works quite well. Thanks!

  30. This one seems pretty good.
    One thing though, why don’t they create a float:center css itself?

  31. It’s very cool and useful!

  32. Permalink to comment#

    So does the :before create some kind of virtual div of the specified width and height?
    Cause from what i understood from the schematic display, the created :before areas act like elements with “display:block;”… Do browsers treat them as such?

    • It’s not a DIV, but yes, it’s a generic block level element. (and it’s only block level because floating it makes it block automatically, otherwise it would be inline.)

  33. robertsky
    Permalink to comment#

    Does it support IE6,IE7?

  34. Nice Idea that i may need in future thanks.

  35. That’s pretty clever thanks for this I will try it out :)

  36. Permalink to comment#

    Oooo very convenient…for now!

  37. Permalink to comment#

    You should definitely check out box-pack:center, it’s another way of achieving this: https://developer.mozilla.org/en/CSS/-moz-box-pack

  38. eshi
    Permalink to comment#

    IE6-7 don’t have :before support, that’s why we need to optimize this example for Microsoft :)

  39. I love it! I’m not a hard core coder but am I right that this is a css3 (only) trick?

  40. Really nice tips for creating the effect…

  41. Doh! o_O

    Thanks for the tip.

  42. Great technique, Chris! I’ve written up a variation on my blog: it uses display: table-cell to create the columns, simplifying the CSS and markup somewhat. Thanks for the trick!

  43. am i correct in thinking that if you wanted to accomplish the reverse of this (ie 2 images with text in the middle) I could do this with the following?

    The pics referred to in this example are stupid.

    perhaps i am making this harder on myself than it should be

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".