Sizing something to tenths of a pixel?

Here’s an interesting situation – I’m working on a page where I need to have five image thumbnails that stretch across the width of the site. The entire site is in a container that’s 980px wide, with a 1px border on each side, so the total width of the content area (where the thumbnails will sit) is 978px.

The thumbnails all need to be the same size, and they need to extend from the left edge of the container to the right, with no gaps between themselves or the edges of the container. If you do the math, you’ll see that each thumbnail needs to be 195.6px wide.

So, I put 195.6px for the width of the thumbnails in my stylesheet. Lo and behold, it actually works in Firefox! But in IE6/7 (and Chrome), the .6 is ignored, so the thumbnails come out to be 195px wide, which leaves a slight gap between the last thumbnail and the edge of the container (and it’s really noticeable, because the thumbnails are dark against a white background).

Two questions:

1. Is there a way to make this work in the other browsers?
2. Why does this even work in Firefox? How can the browser draw a fraction of a pixel? That doesn’t seem to make sense. But, if it works, I’m not going to complain :lol:

There is no such thing as a fraction of a pixel. Even if the browser recognises it, it isn’t possible to render 0.6 of a pixel on your monitor. I think FF is rounding up and down.
Could you maybe make the two outer images 195px wide and the three inner ones 196px? That would give you your 978px and the difference would be a lot less obvious than a gap on one side.

There is no such thing as a fraction of a pixel. Even if the browser recognises it, it isn’t possible to render 0.6 of a pixel on your monitor. I think FF is rounding up and down.

Right? That’s what I thought. But 195.6px works in Firefox! It’s really weird. If I put 195px in my CSS I get a gap, and if I put 196px the images flow outside of the container. 195.6px is mathematically correct, but I can’t understand how Firefox is drawing it. You can’t draw anything on screen smaller than a pixel, right? It’s bizarre.

Quote:

Could you maybe make the two outer images 195px wide and the three inner ones 196px? That would give you your 978px and the difference would be a lot less obvious than a gap on one side.

That might be doable. The images come from our CMS so I’d have to see if I can change them. If so, that would work.

Tips

What now? I have some ideas for you.

Go explore CodePen!

As a front end designer and developer, you should have an account on CodePen so you can save your snippets, present your ideas, and engage with other front end folk. I'd encourage you to go PRO as well, to unlock the full power of CodePen.

Get the newsletter!

You should sign up for the CSS-Tricks newsletter. It's a clean copy of all the blog posts each week, combined together, right to your inbox. If email isn't your thing, there is an RSS feed, iTunes, and lots of other ways to subscribe.

Listen to ShopTalk!

Subscribe to The Lodge!

The Lodge is a members-only, ad-free video learning area here on CSS-Tricks. Just like the free screencasts, but organized into four large complete series. Membership is also the #1 best way to support CSS-Tricks.

We can do the real footer now.

Site Links

Colophon

CSS-Tricks* is created, written by, and maintained by Chris Coyier. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans and Source Code Pro. It is made possible by viewers like you who subscribe to The Lodge and through advertising for products and services I like.