By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,986 Members | 1,522 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,986 IT Pros & Developers. It's quick & easy.

Move image1.jpg leftmost and imag2e.jpg rightmost on a page???

P: n/a
On a webpage I would like to move image1.jpg as left as possible (directly to the browser window left border)
and - simultaneously - the picture image2.jpg to the rightmost (directly to the right browser window border).

How do I code this in HTML resp. CSS?

If the user shrinks the browser window to a size which is smaller than the sum of the size
of the two images image1.jpg + image2.jpg then all browser tend to position these pictures
vertically. But: I don't want a "line wrap". If the horizontal size doesn't fit then
the right picture image.jpg should be truncated.

Is there a solution for this?

Jason

Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Jason Stacy wrote:
On a webpage I would like to move image1.jpg as left as possible (directly to the browser window left border)
and - simultaneously - the picture image2.jpg to the rightmost (directly to the right browser window border).

How do I code this in HTML resp. CSS?

If the user shrinks the browser window to a size which is smaller than the sum of the size
of the two images image1.jpg + image2.jpg then all browser tend to position these pictures
vertically. But: I don't want a "line wrap". If the horizontal size doesn't fit then
the right picture image.jpg should be truncated.

Is there a solution for this?


Absolute positioning.

<div style="position: absolute; top: 0; right: 0; width: 200px;"><img
src="..."></div>
<div style="position: absolute; top: 0; left: 0; width: 200px;"><img
src="..."></div>

should do it (untested) for 200px-wide images. Of course, style
information should be in a separate style sheet rather than inline.

Note that I put the right image first in the source, to achieve your
requirement that it goes "under" the left image - I presume that's what
you intend when you say "truncate".

If you want these to be relative to a containing element rather than the
browser window, put them inside a <div> with position: relative set.

--
Mark.
http://tranchant.plus.com/
Jul 20 '05 #2

P: n/a
Ivo
"Jason Stacy" <jj*****@yahoo.net> wrote in message
news:ce*************@news.t-online.com...
On a webpage I would like to move image1.jpg as left as possible (directly to the browser window left border) and - simultaneously - the picture image2.jpg to the rightmost (directly to the right browser window border).
How do I code this in HTML resp. CSS?

If the user shrinks the browser window to a size which is smaller than the sum of the size of the two images image1.jpg + image2.jpg then all browser tend to position these pictures vertically. But: I don't want a "line wrap". If the horizontal size doesn't fit then the right picture image.jpg should be truncated.


There are many ways to do this using CSS. One possibility is this:
[quote cite=http://www.vansandick.com/archief/]
<div>
<img src="CI2a.jpg" alt="label" id="label" width="560" height="340"
border="0"
style="position:absolute">
<img src="CI7.jpg" alt="label" id="label" width="900" height="340"
border="0"
style="float:right">
</div>
[/quote]

--
Iv
Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.