Multiple images along same line

[Jonein]

Hello everyone,

I'm new to HTML and am wondering how I can put multiple images along the same line. The code I currently have:
<center><img src="headbanner.jpg">
<p align="left"><img src="homebutton.jpg">

Here is how the site is looking now:
________________
¦ Image 1 ¦
¦________________¦

______________
¦ Image 2 ¦
¦______________¦

I want the 1st image centered on the top of the page, and the second on the top left-hand side.
___________ ________________
¦ Image 2 ¦ ¦ Image 1 ¦
¦___________¦ ¦________________¦

Any help greatly appreciated,
Jonein

[edited by: Jonein at 3:23 am (utc) on Feb. 11, 2007]

[tedster]

Hello Jonein, and welcome to the forums.

One way you can keep images on the same line is with the CSS float property -- applied to the image itself or to it's containing div. See [w3schools.com...]

I want the 1st image centered on the top of the page, and the second on the top left-hand side.

This adds a layer of complication. One approach that comes to mind is using position:abolute for your centered image. [w3schools.com...]

For an example of centering, let's assume the image to be centered is 100px wide. If we use the attribute style="position:absolute;left:50%;top:0;" then the image BEGINS in the center, but you want it to have the image's center in the center.

Since you know this image is 100px wide, you also know that you still need to move it 50px to the left. This can be done by adding a negative margin-left rule to the style attribute that you place in the img element:

style="position:absolute;left:50%;top:0;margin-left:-50px;"

For any given layout there can certainly be many approaches. I hope my approach helps you, even though you may eventually end up going in a different direction.