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