Sidebar slides down in Firefox when zoomed out

HTML & CSS
1

Hi,

I have a small issue with the right sidebar on my website (www.configureweb.com). It looks ok on Chrome, IE and Safari but slides down on Firefox when I zoom out using the Ctrl+mousewheel. What might be the cause of this?

Thanks for any ideas,

Nail

2

Hi Ralph,

I am working on Windows Vista + Firefox 6. Did you try zooming out in Firefox (View > Zoom)? When you zoom out, the right sidebar goes down. No issue with scrolling.

3

Is this on Windoze? I don’t see a problem in FF Mac, and in FF Win the page seems to scroll OK to me, though I don’t have the ctrl key.

4

Yes, both with FF set to zoom everything and just to zoom text. In neither case did it break the page.

5

I don’t understand because I see this when I zoom out:

6

Hi,

I can see it drop down when you zoom smaller and it’s caused by rounding errors as things are scaled down and thus making them too big to fit.

As I always say you have to allow breathing space on layouts and not account for every single pixel.

Your left, center and right columns add up to the exact width of the container. Should a browser be 1 pixel out then the layout will break.

There is no need for your right column to be an exact fit as you have 10px padding on each side. Simply reduce the left padding to zero and then reduce the width by 10px and there will be no physical change to the display yet you will create a 10px gutter of free space between the columns and this will soak up any rounding errors.


#sidebar-right {
    float: right;
    padding: 0 10px 0 0;
    width: 252px;
}

As I said that will look exactly the same and will not drop when resized with zoom.

7

Paul, once again thank you very much. I should have thought of that. Now I see my use-every-pixel approach was a not a good one. I removed the left padding and it is ok now. I didn’t reduce the width because it doesn’t look center-aligned when I do so. Do you think it will be a problem?

8

No the width didn’t actually need changing - I don’t know what I was thinking of. Just removing the padding will suffice and give you a nice 10px gutter to absorb any rounding errors.:slight_smile: