Hi people!

Im trying to create a image as a head for my web page but Im having touble with aligning it.

The header is made up of 2 images (made to look like one).

I'm trying to align the images so the left image always stays near the left and the right image always stays near the right. I want it so that people viewing my page on different screen sizes get a head that fills the full width of the page, instead of creating a header that would like fine on 800x600 but would look too small on a 1024x768.

Basically Im trying to get it so that the right image perhaps overlaps the left image, just incase someone viewing the site on a smaller screen that 800x600 still gets a header that fits the whole width, and doesn't go over so that the bottom scrollbar appears.

I've tried doing it as a table or using <div> but it doesn't seem to be working.

Anyone know how to solve this? I'd greatly appreciate it! I hope this post had made some sense, sorry if it hasn't!

Blackpearlfox

untested, but try this...

<div style="width:100px; height:100px; position:absolute; left:0px; top:0px; z-index:1;">
<img src="leftimage.gif" width="100" height="100">
</div>

<div style="width:100px; height:100px; position:absolute; right:0px; top:0px; z-index:2;">
<img src="rightimage.gif" width="100" height="100">
</div>

change the width and height everywhere to suit your design, then test it.

Hey pb&j!!

Thank you for that!!! It has worked!

At first it worked but with all the page content moved up behind it, so I've just made it so that the page contents are within divs aswell now. I still don't know what divs are, I've kinda guess how they work. For aligning stuff exactly how you want by pixel right?

Anyway, thank you again :-D

untested, but try this...

<div style="width:100px; height:100px; position:absolute; left:0px; top:0px; z-index:1;">
<img src="leftimage.gif" width="100" height="100">
</div>

<div style="width:100px; height:100px; position:absolute; right:0px; top:0px; z-index:2;">
<img src="rightimage.gif" width="100" height="100">
</div>

change the width and height everywhere to suit your design, then test it.

For aligning stuff exactly how you want by pixel right?
dont quite understand your question here.
the RIGHT value should be the number of pixels the div will appear from the right side of the window. perhaps leave it at zero if that is working for ya.

Oh I was just asking 'right?' as a reassurance, not 'right' by direction terms.
Yeah I keep all the rightside divs zero and just change the top ones.

dont quite understand your question here.
the RIGHT value should be the number of pixels the div will appear from the right side of the window. perhaps leave it at zero if that is working for ya.

o, ok.
yes, by pixel is good then.
good luck!