Friday 24 June 2011

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

   



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.

6 comments:

  1. I've just realized that I've put the code for the style of this post at the end and that with the "read more" option it could not be executed. So for some time the float center effect was only visible in the complete post. Sorry about that!

    ReplyDelete
  2. This fixed my problem,
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
    Thanks.

    ReplyDelete
  3. Marco thank you - site in development - your CSS (I had to comment out top: 0) works a treat to centre the image and then put text either side - see www.theunicornproject.co.uk - many many thanks

    ReplyDelete
  4. css float properties

    http://www.corelangs.com/css/box/float.html

    css tutorial

    ReplyDelete

Comments are moderated. I apologize if I don't publish comments immediately.

However, I do answer to all the comments.