Previous Message
Next Message

browser zoom breaks layout -- continued

Sent by Philippe Wittenbergh on 15 July 2010 08:08


On Jul 15, 2010, at 4:48 PM, snak detek+0r wrote:

> At the time I couldn't replicate it on my computer, but with the help of 
> folks here, especially Felix Miata, I understand now that it can be 
> replicated by changing the monitor resolution. Now that I can examine 
> it, though, I don't understand what's causing it. And I can't find a way 
> of fixing it without widening the containing div (which causes other 
> visual problems).
> 
> Any ideas on how to approach this?

Looking at this through firebug, and after zooming out one notch, the left border on #maincol has a
computed width of 1.1333px. That of course, throws everything off.
Safari 5 need 3 notches down to have the layout collapse. Here, it is the width that doesn't add
up.

In both browsers, you are fighting a kind of 'rounding-errors'.

One possible way out: don't float your right-hand column (#maincol), and don't declare a width on it
(only tested with Firefox and Safari). Simply set 'overflow: hidden' on that element. It will
position itself correctly (block formatting context adjacent to a floated block). Oh, and don't
declare a width on the 3 div elements inside #maincol. It is not needed, the elements being in the
normal flow will take the full width of  the parent.

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: