I have a multi-column design, and need to float an image to the top of the first column on the next page, like this spread:
Both image tags appear near the start of the HTML document, long before the second page begins.
I think what I need is something like
but where the 'next' means next page, not next column.
In my use case, I'm trying to create an image over a double-page spread, over the centre of the spread, extending over the inside columns. To do this, I place the image twice and show half of it on each page.
I can get close with the attached file, where I use 'float: top next' for the second image. But this makes the text columns on the second page start below the second image. I need them to start at the top of the page, to wrap the image.
In my project, I'm using Javascript to duplicate a DPS image for this purpose. So I can't manually place the second <img> later in the HTML so that it happens to fall on the next page.
Any suggestions?
(In my example, don't worry about the exact alignment of the two images. This is just a minimal example.)
---- ---- _____|_____ ---- ----
---- ---- | | | ---- ----
---- ---- | 1 | 2 | ---- ----
---- ---- | | | ---- ----
---- ---- |____|____| ---- ----
---- ---- ---- | ---- ---- ----
---- ---- ---- | ---- ---- ----
---- ---- ---- | ---- ---- ----
---- ---- ---- | ---- ---- ----
Both image tags appear near the start of the HTML document, long before the second page begins.
I think what I need is something like
float: column-top-corner next
but where the 'next' means next page, not next column.
In my use case, I'm trying to create an image over a double-page spread, over the centre of the spread, extending over the inside columns. To do this, I place the image twice and show half of it on each page.
I can get close with the attached file, where I use 'float: top next' for the second image. But this makes the text columns on the second page start below the second image. I need them to start at the top of the page, to wrap the image.
In my project, I'm using Javascript to duplicate a DPS image for this purpose. So I can't manually place the second <img> later in the HTML so that it happens to fall on the next page.
Any suggestions?
(In my example, don't worry about the exact alignment of the two images. This is just a minimal example.)
Edited by arthurattwell