Easily ensure images don’t overflow your content area

Just a quick one!

Have you had the problem of images overflowing your main content area?

I have had this issue and it is particularly problematic with fluid layouts like this one.

The answer is simple-

img {max-width:100%;}

Well…. nothings that simple……

Because of padding and margins etc my images, although smaller, still overflowed slightly… So I had to change the css to

img {max-width:91%;}

Of course once I had put this in my style.css every single image was no bigger than 91%….. no good.

I only wanted to target images within my main content area, the dynamic bit. My main content area div is called “#pagecontent70″ (its at 70% width..) so my final alteration to the css turns it in to this-

#pagecontent70 img {max-width:91%;}

Beautiful.

Or is it? The savvy among you will know that this will not proportionaltly resize the image….. again… no good.

Simply over come this with a little height:auto malarkey.

So our absolute final (promise) alteration to the css leaves us with this-

ps. To see this in action, check out the ruler image at the top… Its actually 1240px wide and I inserted it through WordPress as a “Full Size” image.