Hello everyone,

I have been trying to decipher how to automatically expand and shrink the images on the landing pages for my website. I have been utilizing resources like one on Web Designer Wall. I also read on Stack Overflow with someone having a similar issue, and someone was saying it had to do with the parent element not resizing, with a recommendation to add width:100% to that element. Since I want the articles' pictures to be resized and those images' parent element are divs with either class of .floatLeft or .floatRight, then why don't the following styles generate the shrinking/expansion of the images when the browser is being resized?

Code:
.floatRight,
.floatLeft{
	width:100%;
    overflow:hidden;
    margin:8px 0;       /* vertical margin between content sections */
}
.floatRight img, .floatLeft img{
	max-width:100%;
	height:auto;
}
.floatRight img{
    float:right;
    border:3px inset #000;
    margin-left:2em;
}
.floatLeft img{
    float:left;
    border:3px inset #000;
    margin-right:8px;
}
img{display:block;}
Thanks,
Tyler