CSS: float center? Yes, we can do it!

Tweet

Can we trick the float property and create something like float:center?
This very article is demonstrating that it is actually possible with CSS.
As you can see, the CSS3 logo is staying at the center of the two columns and we are actually using placeholder pseudo elements to obtain the desired effect.
We are basically carving a place for our image and

 then insert it using an absolute positioning. Isn't that impressive? The technique is quite easy to understand and has little code, but a few things should be remembered. We will use placeholders for each column (two divs in the example), using the float property: one column will float right, and one will float left. The pseudo element will have the height of the image and nearly the half of the width. Now let's see the code behind it.

The HTML
This is the easy part. Create two divs, one will have class="r", and one will have a class="l" (right and left):

<div class="l">the text for the left column</div>
<div class="r>the text for the right column</div>

Then we place the image. Because it will be absolute positioned, we can place it anywhere, but with a class="imageC":

<img src="the path to your image" height="200" width="200" class="imageC">

Now we need to create the styles for those classes.

The CSS
The style we are going to use will be:

.imageC {
   position: absolute;
   top: 0;
   left: 50%;
   margin-left: -125px;
}
.l, .r {
   width: 49%;
}
.l {
   float: left;
}
.r  {
   float: right;
}
.l:before, .r:before {
  content: "";
  width: 125px;
  height: 200px;
}
.l:before {
  float: right;
}
.r:before {
  float: left;
} 

And that's it. The trick is quite impressive, isn't it?

Credits go to Chris Coyier of CSS-Tricks*. Well done Chris! I've stolen his idea and changed things a bit, but nothing really important.

Have a splendid day, and please leave a comment in the section below!

P.S. IE7 won't interpret the css part correctly and won't display the effect properly. Please let me know if you find something else.