Faking ‘float: center’ with Pseudo Elements

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 text¹, 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.

¹ 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.