Hi all ,

My entire page is fluid and based on percentages. The only issue is that a critical part of my page uses 12.5%, which FireFox/Chrome round down to 12%, thus entirely messing up the look/layout of the page. As such, the solution I thought of is instead of using a 100% page width, change the page width respective of the user's screen resolution (please let me know if there is a better method I can use to not have to worry about this .5% issue). Here is the code I have so far:

HTML:
Code:
<link type="text/css" href="style.css" rel="stylesheet" media="all">
<div id="container"></div>
CSS:
Code:
#container {
	margin: 0 auto;
	width: 100%;
}
@media all and (min-width:1024px) { #container { width: 1000px; } }
@media all and (min-width:1280px) { #container { width: 1256px; } }
Above, I set the default width at 100%, but what would be the best width for me to put there to accommodate "Unknown" resolutions?

I should also mention that above, I only included 2 min-width's, but in actuality I will include the following 42 different min-width's:
Code:
376
400
416
432
480
512
528
540
640
720
768
800
824
832
854
864
960
1024
1120
1152
1280
1366
1400
1440
1600
1680
1792
1800
1856
1920
2048
2304
2538
2560
2800
2880
3200
3840
4096
5120
6400
7680
Please let me know if this is the right approach or if there is some better solution. Thanks!