Adjusting Page Width Based on Screen Resolution

HTML & CSS
1

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:

<link type="text/css" href="style.css" rel="stylesheet" media="all">
<div id="container"></div>

CSS:

#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:

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!

2

I forgot to mention–the reason that the layout becomes messed up due to this half percentage is because it is not a fixed width, so as such, when you multiply .125 * screen resolution, it involves decimal points which get rounded down by webkit browsers, thus messing up my neat looking layout.

3

If you want fluid designs, you may have to think differently about layouts. Trying to lock down the layout at so many screen widths is impractical. It’s better to design your elements so that they can afford to be more fluid. If you have fixed width elements, just choose a break point at which the layout of elements just can’t work any more. Like when you have a flexible width element next to a fixed width element. At some point, the flexible element will become too narrow, at which point you just need to drop it below or whatever.

4

Thanks Ralph! Actually, the entire page and all its elements are fluid. Originally, the page width was 100%, but then I made it as I described above (fixed) to get rid of this issue of Webkit browsers rounding down from 12.5% to 12%.

In any case, you’re right that perhaps I should rethink my design. I’m going to see if I can just make my element work at 12% instead of 12.5%.

Thanks!

5

Ultimately, browsers have to calculate everything in px, and some times they will have to do a bit of founding. So you need to leave a bit of room for this, unless you specify your break point in px rather than in %.

6

Yes, you’re right. I’m experiencing the same issues now with 12% as I was with 12.5%. How bad or wrong is it if I try to lock down the layout at dozens of various screen width ranges? What’s the worst that can happen?

7

The worst that can happen is that you’ll chew up a lot of time. :slight_smile: I don’t see any other problem than that it’s a bit inefficient.

8

Thanks Ralph!