Log in / Register

Forum › How do I...?

How do I... show image (or block element) left/right hand across an other element.

Mike
Hi all,

Probably not clear what I'm trying to achieve from subject...

Use case:

"I want an image displayed on right hand page, where element X is on left hand page."
OR
"Display an image on right hand page, if element X is found".

What would be the best way to achieve this.

Thanks,
Mike
mikeday
I don't think this kind of magazine-style layout can be expressed in CSS yet.
Mike
Pity...

The only option left is to add/remove (adjust) content to get image on right hand?
dauwhe
If you know your element is on a left page, you can float the image to the next page:

<html>
<head>
	<meta charset="utf-8" />
	<title>Untitled</title>
	<style type="text/css">
	div.left { page-break-before: left; }
	div.right { float: top next; }
	</style>
</head>
<body>
<p>some text</p>
<div class="left">
<p>Content on left page</p>
<div class="right" style="border: thin solid red;">
<img src="hello.jpg" alt="appears on right page"/>
</div>
</div>
</body>
</html>


This probably won't do what you need, but it might come in handy somewhere...

Dave
Mike
Thanks Dave, I'll play around with this.

So, the question now is 'how to know if element is on the left hand page'...