I have images using various indents based on whether the image falls under a numbered list or bulleted list (or a sub-bullet which is nested even further). For my <img> tag, I have max-width: 100%;. From what I understand, that means the image can be 100% of the maximum width of the object in which it's contained. I assumed the "container" for the object was the page layout margins/body margins (for print). But the image doesn't seem to respect the right margin--it overflows.
How can I address this? I want these type of wide images to not exceed the right margin when indented with an indent style. Regular paragraph text obeys the right margin, no matter what indent style I put on it. So why can't images?
If the page layout margins/body margins are not an image's "container", can I define a container to put the image in? For example, that container would have a set maximum width (say 7in), and then the image inside that container would have a max-width of 100%. So if an image is indented within the 7in container, it will auto-scale/size and not exceed the 7in container width. If this is possible, anyone have any idea on how the CSS code would look?
Sarah