float:center

Unfortunately float:center is not valid CSS, no matter how much we would like it to be. And God knows I tried. The thing with floats is that the left and right property really make them go to the left of their (floating) container. The problem you can get in to is with a series of boxes that you want to have floating alongside, and then centered in the middle of the site.

Let’s say for example you want to have three buttons next to each other, spread out over the full width of your site, and they all link to some section of your site, say:

  • My Portfolio
  • About CSS
  • Blog

In addition, you want it to be viewable on a really small screen, as a PDA or phone browser, and the easiest way you think would be to put them floating, so they would automatically wrap. This is usually a good idea, however, in this case you also want the buttons to be smack left aligned when viewed on a small screen.

There just is no solution for that. The only thing that comes close is giving all these buttons a fixed width (don’t get me started on percentages, it just won’t work). Make sure the sum of the widths equals the width of the container. So if I have a site of 660px, I would give every box a width of 200px and add 10px padding on every side of each box.

So

  • Box A: 10+200+10 = 220px
  • Box B: 10+200+10 = 220px
  • Box C: 10+200+10 = 220px

The only problem is that when you make the window smaller the boxes all have a little indentation on the left.

This is the CSS you would use

.container {
  width: 660px;
  margin:0 auto;
  display:block; }
.button {
  width:200px;
  padding:10px;
  background-color: gray;
  border:1px solid black; }

Of course you could do the same thing with ems.

Update: this problem was recently solved by Firefox 3.0. As of this version all major browsers, including IE6 have support for inline-block. When you use inline-block, you don’t need floats. Put it on the boxes (as in the above example Box a,b and c). You don’t have to specify a width, and by putting text-align:center on the container the boxes will automatically be centered, no matter how many boxes you have.

Advertisements

25 comments so far

  1. Steven on

    Hello. I was wondering if you could help a novice CSS developer with a potentially easy problem. I’m trying to use absolute positioning width 100%. It works on IE7, FF, & Safari, but not IE 6. It will come short of spanning the browser window. Any suggestions?

  2. michiel on

    Hm. I’m not sure right away. Maybe IE doesn’t know what it’s width would have to be if the container has no width. Another cause could be margin and padding on the body or html element. Try html, body {margin:0; padding:0; width:100%}

    If you need more help email me the html+css

  3. dhanchey on

    So, how can I center my header image?

  4. michiel on

    @dhanchey

    use
    margin: 0 auto;
    display:block;
    float:none;

    on the image

    • ihsan on

      oeh god., i got it.
      thanks so much..

      gonna try ’bout next week:)

  5. gdgf on

    dfhgfhfhd

  6. Dave on

    @michiel

    Thanks very much 🙂

  7. Ahsan on

    I was looking to float or align an element in CSS, is it possible?
    can we float at center? I tried it in Drupal’s css file but it never works.

  8. michiel on

    @Ahsan,
    sorry for the late reaction… The title is just a teaser, you can’t really float at center using CSS. There are alternatives though, like I described in the article, using e.g. inline-block. Another centering method is position:absolute, left:50%, margin-left:-{width/2}px, where {width} is the width of the centered element.

  9. Matt Jabs on

    @Michiel

    Thanks man, this solved it for me too.

    Matt

  10. Stian on

    Thanks! This made my day!

  11. David on

    Im having some trouble in drupal also with this css. I need to float align a “li” to the center of its container. Its a set of thumbs with the containers width set to auto. I would like the thumbs to center automatically because each gallery has a different amount of them…

  12. Antony on

    Thank you so much! I have been all over the place trying to find a float:center solution.

    You’ve saved me many more hours!

  13. Evan on

    This was the perfect solution. Thanks!

  14. Rob on

    Thanks! This really helped me out with a layout issue I was having.

  15. pjaxon on

    Hi and thanks for the helpful hints. Your suggestion works for me in IE 7, but not FF 3.0 or 3.5. The rotating header graphic at http://beta.appalachiablog.org/ won’t center in those two browsers (you may have to make your broswer smaller or wider to see the issue). Any thoughts?

    Thanks for any and all advise ~ pj

  16. pjaxon on

    … correction. IE doesn’t seem to work either when the browser is too small.

  17. pjaxon on

    So… I fixed the issue I described above and thought I’d share this with others that may come across something similar. In my case, I think the above suggestion wasn’t a perfect fit because I’m bringing in images through javascript… so I had to approach the problem from a different perspective. My below fix will dynamically detect the current size of the browser… and will update margins when necessary. My background header graphic was 1196px wide… so replace this width with something of your own. Basically, all I did was set the left margin to a value that is the browser width minus 1/2 the image width. Could be a positive or negative number depending on how small/large the browser is.

    You have to tell the browser to execute a function when it’s resized… so that’s why I included the body tag below.

    Code:

    function fn() {
    var thisMargin=(document.documentElement.clientWidth-1196)/2;
    thisDiv = document.getElementById(“headerGallery”);
    thisDiv.style.margin = “0 auto 0 “+thisMargin+”px”;
    }

    var thisMargin=(document.documentElement.clientWidth-1196)/2;
    document.write(”);

  18. pjaxon on

    … well, sorry- the comment feature stripped out a bunch of my code… you can view the source at http://beta.appalachiablog.org/ and probably figure it out ~ pj

  19. John | Easiest Game on

    Thanks for the tip, I am really having trouble figuring things out.

  20. vinyl cupolas on

    It’s hard to find knowledgeable people on this topic however you sound like you know what you’re talking about! Thanks

  21. sohbet on

    thanks so much..

  22. How To Repair Drywall on

    yea at least you guys know what your talking about.

  23. Subhiksha Gara on

    Your blog is just what I needed. You have no idea how long I have been thinking about the same exact thing!

    I am so pleased that I am no longer apart.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: