good morning (or afternoon to some of you) everyone...

as i get deeper into this web page building thing... i keep running across more problems then solutions... and considering how much smarterer most of you are when it comes to this thing then me, i am here once again to ask for advice or a helpful link...

Anyways, i have few DIVs i am using (left, right, center) for some adds on the bottom of my page... and they look really cool when i view the page in full (max size) mode... however when i make it smaller (you know that Restore Down... not minimize button)... my pics don't keep their right proportion (they get too fat... as in width is smaller then needed in order to keep same proportions)

i think there must be a tag of some sort to make picture size relative to the screen (like in %) to solve this... am i right? wroght?

here is my rather.... ehh... advanced?... code in CSS file

.addcontainer {
width: 100%;
height: 100px;
}
#addleft {
float: left;
width: 33%;
}
#addcenter {
display: inline;
float: left;
width: 33%;
}
#addright {
float: right;
width: 33%;
}

#add {
float: center;
width: 90%;
}

and here is what i have in HTML portion...

<div class="addcontainer">
<div id="addleft">
    <div id="add">
<img style="width: 100%; height: 100%;"
 alt="Add 01" src="Add_01.jpg">
    </div></div>
<div id="addcenter">
    <div id="add">
<img style="width: 100%; height: 100%;"
 alt="Add 02" src="Add_02.jpg">
    </div></div>
<div id="addright">
    <div id="add">
<img style="width: 100%; height: 100%;"
 alt="Add 03" src="Add_03.jpg">
    </div></div>
</div>

now i am sure some of you might get jelause and try to still my awsome code.... if so, all i ask is for some sort of moneys ;0)

anyways... if anyone can help me out... well... that would be just great!!!

ohhh, and one more little thing... is there a reason why i can't see any of the pictures in IE with this code?

i think there must be a tag of some sort to make picture size relative to the screen

Nope, there is no such tag.

Pictures, generally are static in size and cannot be resized with HTML. There are some javascript solutions, but the image quality generally suffers.

then how come my pictures get smaller in width (but keep same hight) with this code?

<img style="width: 100%; height: 100%;"

and more importanly, is there a way for me to keep them at the same proportions? and if not... what would you recomend for me as a solution to this problem?

If you take the style="width: 100%; height: 100%;" off of the images, they should not change size or proportions when the browser size changes.

I don't know if this is the reason your images aren't showing up in IE, but I noticed you have id="add" on more than one element. You should change those to class="add" and change your stylesheet to .add. An ID is supposed to be unique and a CLASS can apply to multiple items.

Originally Posted by agent_KGB

then how come my pictures get smaller in width (but keep same hight) with this code?

<img style="width: 100%; height: 100%;"

and more importanly, is there a way for me to keep them at the same proportions? and if not... what would you recomend for me as a solution to this problem?

Because the "n%" is telling the browser to render/stretch the image for n% across the screen.

Originally Posted by angele803

I noticed you have id="add" on more than one element. You should change those to class="add" and change your stylesheet to .add. An ID is supposed to be unique and a CLASS can apply to multiple items.

sweet... thanks a bunch... learning something every day