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.

CSS: float!

Tweet

The float property is not really new. It has been used a lot, especially in blogs and online magazine. The most common use is when we need to put an image in a container and make the text surround it. Like this:

Lorem ipsum dolor sit amet, imperdiet in massa risus ultricies, nulla neque commodo quisque, varius vitae odio, urna mi massa semper pellentesque faucibus turpis, a sodales sit. Nullam ut dui tincidunt dui sodales, et eget ultricies cras ac mauris, et in sollicitudin quis et cum lacinia. Eget quis platea est pretium magna vitae, rhoncus luctus nulla vehicula pretium explicabo, turpis placerat. In ut posuere magna tortor non architecto, nisl cras eu lacus curabitur cras mauris. 

I believe you have seen the above effect everywhere. It is actually very easy to achieve and in this short article, we will see how to do it.