Home/ Questions/Q 8218271
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T12:44:12+00:00

Here is code example: http://jsfiddle.net/gubvw/3/ If you’ll slowly change screen size by dragging sizer

  • 0

Here is code example: http://jsfiddle.net/gubvw/3/

If you’ll slowly change screen size by dragging sizer in testing window you’ll see that number columns scattered.

Column scattering

What can I do to fix this trouble?

UPDATE: This is for FLUID CSS GRID system to make layouts for webapps. I don’t want to get table. And the example is for testing this grid on resize and other dimensions.

I think that the problem is in browser which calculates .cx1 to 55+43px and round it to pixels,
and .cx5 calculates to 449+43px not watchind that .cx1 rounded to 55px.

Specially for Dexter Huinda:
There is 100% width? and 12 columns with 3.8% margin right (except the last).

So for cx1 = (1*(100+3.8))/12-3.8 = 4.85%
for cx2 = 4.85*2+3.8 = 13.5%
for cx3 = 4.85*3+3.8*2 = 22.15%
and so on.
The main formula to calculate any column width from 1 to 12 is
       (a*(100+b))/12-b (where a = number of spanned columns and b is margin)

Any questions to math?

And the question is why: width(4.85%+3.8%+4.85%+3.8%+4.85%) <> width(22.15%)

So if you need nothing to explain please find the mistake in any .cx width. Can you?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Solution is here: http://jsfiddle.net/NwkPz/.
    Thanx to Vasiliy Aksyonov (Web Standards Days) && Vadim Makeev (Opera Software)
    yeah

    ))

    • 0