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
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.
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/