I'm making a webpage for a nonprofit.

I have a header and two column layout defined by CSS.

Everything stays together as it should with window resizing (that only took a day).

However, an image I have sticks out beyond the margins of the header div when I resize the window.

I looked around the internet at some other sites that resize properly including images, and they all seemed to have coding that I THINK was java or javascript.

Can anyone point to where I can get the code for dynamic image resizing so that the image stays put in the header and doesn't extend beyond the boundries I (tried) to set?

I did a search at W3C schools and on google, but I'm not really sure whether I am looking at the right code, or if I need to customize it to place it in the page. (I can C program but haven't taken Java or Javascript yet)

Any help would be greatly appreciated.

There are different ways to handle this. Can you point us to a page using the trick you have in mind? Some sites that resize as the browser's width is changed will have a minimum width set so the banner can't protrude. Others place the image as a background so it only shows whatever the width of its element reveals.

Another much less commonly used approach involves actually scaling the image's size as the browser's width changes, but browser-scaled images can look really bad. This technique uses CSS to define the width of the image as a percentage, and the height of the image is left undefined. The width and height attributes in the <img> tag are not used at all.

First, off I finally got my page up to view. You can go to
http://home.grandecom.net/~leedowney/ to look at my amauteur job.

Secondly, I made a banner to be the background of the header div instead of a regular "img src". It doesn't protrude when resized now, but it still doesn't scale as I like. Like you said, it only shows what the div reveals and that can look kinda icky.

Thirdly, one of the sites in particular I was looking at was
http://www.plannedgivingpa.org/

I looked at your page, and it seems that is what I am interested in. So if I set a width attribute to the image, it will automatically rescale with CSS?

Can I use these attributes with a background img or should change it back to a standard image?

I'd like to keep it in CSS right now, as that is what I am learning/trying to master. When I take some more classes I'll delve into the wonderful world of web programming.

Thanks that worked!

I used a new img class (img.banner) and used the width attribute. It scales now when I mess with the browser window.

Thanks for the help!