Having images side by side and not overlapping?
 

Hi there,

Pretty new to website design and HTML coding.

My website is as follows:

www.darkline.org.uk

In the header I have the following code which shows one image on the left of the header, and on the right:

<IMG SRC = "http://darkline.org.uk/left.jpg"br / BORDER = 0br / align = left br / >
http://darkline.org.uk/right.jpg

This works fine and is useful as when the users screen is a different size the images will move to fit the screen.

The problem arises when the smaller the users screen is, the images come closer together which is fine as that is the intention, however if the users screen is too small the right image will fall underneath the right image when I want them to stay on the same line.

What I would like them it to do is to get as close as they can and then stretch the width of the page if the screen is too small but stay on the same line.

Can anyone help with the coding to do this? Is it possible?

In your browser if you make the browser narrower, imitating a smaller screen you can see the images come closer together and what I mean with right image falling below the left.

Any help would be appreciated!

Saqib