width of 100% not always 100% in Opera

[james438]

I have this fun little problem for those who want to play around with it. It is not very important, but I can't figure this out either.

I have a test page with a footer, a header, and 3 columns in between. I tried to keep the page fairly simple and I might try to prune it down further.

The Header and the footer have a width of 100% and they are operating as I would expect. The 3 columns have an aggregate width of 100%, but it is not as wide as the header or the footer. To illustrate this I have a background set in blue behind the 3 columns. The blue background should not be visible to the right of column 3, but in Opera it is.

Is this an Opera bug or am I just scripting this wrong?

If nothing else, I find this a little odd and interesting.

[traq]

happens in Chrome, too.

likely just a rounding issue. Your container is 909px; 32% of that is 290.88px (which Chrome rounds down to 290px); 34% is 309.06px (which is rounded down to 309).

(On top of that, 32% + 32% + 34% is only 98%.)

[jscheuer1]

Actually the container varies in width, right? It's set as a % as well or in some other way adapts to the window width. But traq is probably right in a general sense because if you slowly resize the window horizontally, there are points where it fits exactly with no blue over there on the right.

[james438]

Interesting, there are points when resizing the window where there is no blue peaking to the right of the right column when I resize the window. Those points are very hard to find. It should not be.

Traq, the container is 100% not 909px. The width of the first two columns is 32% with a right margin of 1% for a total of 33%+33%+34%. The last column does not have a margin. Any px padding or margin listed is very small and should have no affect on the column widths.

I am thinking of reporting this as an Opera bug, but I want to find out for sure and also where it is coming from.

[jscheuer1]

Well, Chrome does do it too. Which probably means Safari as well. A simple though somewhat limiting solution would be to make that blue color the same as the background color of the columns.

[james438]

In that case maybe it is supposed to operate that way. I'll try to post in the Opera forums and see what they have to say about this. I'll try to post back here if I find anything out.

unfortunately, in my experience, they are not always the best about replying to posts or at least not as good as here. Most likely that is just my experience.

The blue background is used to illustrate the bug. For now I have added it to my slowly growing list of Opera bugs.

[traq]

sorry for the assumption about the width (that's what the width was, on my screen, when I checked).

I'd still look at this as a "percentages problem," however, not a browser bug. Different browsers are known to handle rounding percentages in different ways - up, down, every-other, getting most as close as possible and adding (or subtracting) the excess from the last. I read an article about it once, but I don't recall where.

[james438]

That makes sense traq. How did you come up with 909px considering the very fluid design of the page?

I am going to try something different to take care of this problem, but it is different enough that I will start a new thread.

[traq]

That makes sense traq. How did you come up with 909px considering the very fluid design of the page?

that's just how wide it happened to be on my screen, and I didn't look at the css for that part - I was only paying attention to the "column" boxes, and I didn't happen to change the window size. It was an oversight.

[james438]

I understand, but typically a figure of 909px is not something the average person can look at say "yep, that's 909px". I am wondering if you have some sort of program that displayed that figure. It might be an interesting tool to play around with.