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