Den 22.03.2014 22:39, skrev Karl DeSaulniers:
Hey Georg, Thanks again for this example! Had a quick question. For
some reason, if the outer boxes min-width is less then the totall
width of the two inside containers, the two inside containers stack on
top of each other in your example. Any way to prevent this stacking?
:-)
As I can now see the actual case, I have adjusted all relevant values
here...
http://www.gunlaug.com/contents/test/shrink.htm
...and also removed all unnecessary properties/values.
To make your "illusion" near perfect, the two images must have the exact
same width/height ratio.
Your pictures have a slightly different ratio, which I compensated for
by giving the two images different max-width and a little negative
backside-margin "gap" for browsers to put their various "sizing
variations and bugs" in. That negative backside-margin will prevent
stacking on narrow windows.
Note that for a simple case like your "whole page" example, regular
absolute-positioning of the two images left and right, and a min-width
on the page or body, would do. I envisioned something slightly more
complicated in the middle of a page, where my example would be more
robust in various settings.
regards
Georg
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
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/
