In IE7/8 the right-hand column on every page shifts down to the bottom left of the page when the text is zoomed (CTRL+).
Can anything be done to fix the columns into the correct alignment for zooming?
Thanks in advance for any feedback,
The issue is not with the zooming. If you were to resize the browser window to somewhere less than 1135px wide, the right content will be pushed down.
The difference is IE pushed it to the extreme left while FF pushed it to beneath the middle content. Reason being you floated both 3 elements to left and the left most navbar is 'taller' than the middle one in FF but not IE. The left-stacking caused the right-side content to go below left-side nav bar in IE.
Screenshot of IE8 - No Zoom
Screenshot of FF3.6 - No Zoom
(Note the position of the blue outline with respect to the left nav bar)
I'm not sure if it is your intention for such stacking behaviour/layout. If not, you will need to enforce a minimal width for the wrapper DIV (enclosing "content' and 'rightcontent' DIVs) to say
min-width: 1135px and the 3 will be stacked side by side regardless of zooming (except zooming by text only).
This is a common "problem" when using float based designs, and is commonly called "float-dropping". When the boxes/columns expand to fit the containing content sooner or later there won't be enough space for all the horizontally stacked columns.
You could consider using em-units for layout so that the columns are expandable. Combined with at max-width (so that the content doesn't get bigger than) it could be a nice solution. 456bereastreet use this solution.
Thanks for the fast response guys. The min-width of 1135 on the wrapper seemed to fix it.