How to fix browsers rendering of percentage widths

[AndHeiberg]

Hi all CSS ninjas and alike,

I have a question for you. I’m experimenting with responsive design but I’ve come to roadblock. My basic premise was that there should be a solid flexible grid at the foundation of any responsive design. With this premise I set out to find the best responsive grid system. (this is of cause very subjective:) ) I found a flexible system called Gridpak, which would let me roll my own with ease and thought of this to be a great idea. I downloaded my zip and set up a test to see if it worked.
This is when I hit my roadblock. The grid didn’t allign correctly. I thought it might be a problem with the tool it self, but I concluded this wasn’t the problem after checking the math and simplifying it a bit. I did some research after banging my head into the wall for an hour or two and found the problem.

The problem:
All browsers handles floating points differently since there is nothing in the spec about how this should be done.

What is the solution to browsers handling floating points differently?

Solution 1:
Simply forget about it and get over my OCD and let this inconsistency occur.

Solution 2:
Make a grid with no floating points, but by my testing this doesn’t really help since adding margins in to the mix will also break the layout if they are in percent.

Solution 3:
Use the grid I have know that is almost perfect in webkit and perfect in all other browsers. And then make a jQuery plugin that set’s the width in pixels on resize when in webkit.

Solution 4:
Is there one? Am I simply doing something stupid?

If you would like me to add some code please tell.

Links:
http://www.webmonkey.com/2010/12/why-percentage-based-designs-dont-work-in-every-browser/
http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/

[AndHeiberg]

I made demos and a better description of the problem on my blog. Heres the link http://www.andreas-heiberg.com/blog/2012/is-perfect-flexible-grid-systems-even-possible/

[Paulie_D]

Solution 1.

It’s HIGHLY unlikely that visitors will

1. Use more than one browser at the same time
2. Notice the difference if they did
3. Care…even if they did notice

[Author]

Posts