Hallo,

i try to set for all my ":left" pages an alternative layout.

What it means:

the default page layout contains two floating div-boxes.
the first box have a float:left and contains text. The second one also have a float:left and contains some images. So the text-box is left and the image box is right. (yes of course they have static width values )



Now i would like to have the text-container on the right side and the image-container on the left.
It´s possible to do it in the browser by setting the text-container float:left to float:right.

But..how can i set this changes only to left pages?

i tried

@page:left {
	@bottom { ... }
	@bottom-right-corner {...}
	.textcontainer { float:right; ... }
}

And also

@page:left .textcontainer {
	float:right;
}

But it don´t work. Is it possible do define this by css (or JavaScript?)

Thanks!

Sir, we are surrounded!

Excellent! Now we can attack in any direction.

No, you cannot change values depending on which page an element appears on. However, you can use "float: inside" or "float: outside", which will either be left or right depending on whether you are on a left or right page. This is for creating duplex two page spread layouts, and can also be combined with the margin-inside and margin-outside properties.

Thanks for the reply.

Can you be more specific how to use float: insde/outside depeding on page-side, please?
Where do i have to set this values?

Thanks you very much.

Sir, we are surrounded!

Excellent! Now we can attack in any direction.

Edited 18 Jun 2013 by Redraptor

For example:

.textcontainer { float: inside }

This will float the block to the right of :left pages, and the left of :right pages.

Thank you!
It does exactly what i want.

Sir, we are surrounded!

Excellent! Now we can attack in any direction.