How do you stop two images from moving when window resizes?

Quacker · Joined: 23 Jun 2007 Posts: 7

Clearer Question:

How do you stop two images from moving when you resize the browser window?

Ok, so I have two separate images but they appear and are supposed to look like ONE big image.

They appear as one image when the viewer has the browser window open in a large, maximized setting.

But when minimized, the second part of the image moves and goes under the first part of the image, trying to cramp into the viewed space. It shifts downwards, chopping up the image into two.

Here is the web page I am having this problem on:

http://www.freewebs.com/volatilldesigns/

Look at it first in a maximized window view.

Then, when you resize it to a smaller view, notice how the banner image (which is really two images) cuts in half and moves to the bottom.

What I want to know is:

How do you lock those two separate images together to stop them from moving EVEN when the window is resized to a smaller size?

Should I put a transparent or black table around them to keep them together? If so, how do you make a table fit for this?

Pattons3rd · Joined: 28 Dec 2006 Posts: 1212 Location: Colorado

That link doesn't go anywhere.

Are you using percentages?

Quacker · Joined: 23 Jun 2007 Posts: 7

Hold on, you mean the freewebs link didn't take you anywhere?

This one?:

http://www.freewebs.com/volatilldesigns

Or do you mean the button? The button is supposed to only make the page into a Favorites item.

I'm not using any percentages, I don't think.

What I'm asking about is the image at the very top of the page that says, "Volatill Designs" with the yellow swirly thing in the background.

That image is really TWO images.

So the code just looks something like this:

<img src="top_banner_left_side.gif"><img src="top_banner_right_side.gif">

That's all.

When I resize the page those two leave each other and the right side goes under the left side image.

How do I keep those two images together without making them into one image?

Pattons3rd · Joined: 28 Dec 2006 Posts: 1212 Location: Colorado

Oh, ok the link is working now.

Have you tried margin: 0px; on the image styles?

Are the <img>'s on the same line with no white space?

Quacker · Joined: 23 Jun 2007 Posts: 7

I don't have any margin:0px; things anywhere.

And yes, there is absolutely no white space between the two images. They're smacked together.

Buut ... I found out a way to keep them together: I just put the two images in a small iFrame.

Thanks for trying to help! Mr. Green

Pattons3rd · Joined: 28 Dec 2006 Posts: 1212 Location: Colorado

Glad you got it to work. Very Happy

Maybe next time you might want to just add style="margin: 0px;" into the <img> tag and see if that will help.