Jeff,
the problem is if you need to put images one on top of the other you need
to use absolute positioning, wich relies on the position on the page
relative to the closest positioned parent and not on the position of the
closest parent.
The solution is old and has support on most browsers: centering a zero
width closest parent (by closest I mean next up in the stack).
You have a good exemple here:
http://www.wpdfd.com/editorial/thebox/deadcentre4.html
hope it helps,
isabel
On Tue, Jul 10, 2012 at 9:55 PM, Georg <gunla...@c2i.net> wrote:
> On 10.07.2012 19:40, Gates, Jeff wrote:
>
>> Hmmm, I added a max-width of 800px (which is the width of the actual image
>> and I think it's working!
>>
>> #past_background div.past5 {
>> display: block;
>> margin-left: auto;
>> margin-right: auto;
>> width:60%;
>> max-width: 800px;
>> border: 1px solid orange;
>> }
>>
>>
> If you reverse the width declaration to 'width: 800px; max-width: 60%;',
> you will get the same behavior in a container that behaves responsive the
> same way as the images. Although appearance/responsiveness will be the same
> this behavior may be easier to grasp..?
> Images should have a 'max-width: 100%' of its container.
>
>
>
>> But, of course, I don't understand why. And this is what bothers me with
>> developing a responsive design. If I create a style and it doesn't work I
>> play with it until it does (or end up writing this list if nothing I do
>> works) but I often feel like I'm striking in the dark, hoping to hit it,
>> if you know what I mean. -g
>>
>
> The original problem lies in that the image on top was/is absolute
> positioned to the top/left of its container, and as the container expands
> it stays top/left regardless of centering of "real" image. Making the
> container no larger than the real image and centering it, makes top/left
> position the same for both images, so positioned and non-positioned images
> stay and respond the same.
>
> regards
> Georg
>
>
> ______________________________**______________________________**__________
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/**mailman/listinfo/css-d<http://www.css-discuss.org/mailman/listinfo/css-d>
> List wiki/FAQ --
> http://css-discuss.incutio.**com/<http://css-discuss.incutio.com/>
> List policies --
> http://css-discuss.org/**policies.html<http://css-discuss.org/policies.html>
> Supported by evolt.org --
> http://www.evolt.org/help_**support_evolt/<http://www.evolt.org/help_support_evolt/>
>
______________________________________________________________________
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/
