Menu
I have the following piece of HTML:
<html>
<head>
<style>
.part { background-color: blue; width: 40%; float: right; }
</style>
</head>
<body>
<div>
<div class="part">Hello World 1 </div>
<div class="part">Hello World 2</div>
<div class="part">Hello World 3</div>
<div class="part">Hello World 4</div>
</div>
</body>
</html>
Right now the text is flowing to the right (good) and down (bad). Is it possible to flow to the right and up?
The current version looks like:
[Hello World 1][Hello World 2]
[Hello World 3][Hello World 4]
The final version should look like:
[Hello World 3][Hello World 4]
[Hello World 1][Hello World 2]
900
One slightly cheeky way to do this would be to rotate both the outer div and the inner divs by 180 degrees.
Rotating the outer div will mean the elements are upside-down but shown in the order you want them.
Rotating the inner divs will put them back the right way up while keeping them in the reverse order.
The whole code is as simple as this:
.outer, .part {
transform:rotate(180deg);
}
Yes, it's a very very cheeky hack. It's certainly not efficient in terms of processing power. And it just feels wrong. But you know... it works.
Here it is in action in a fiddle: http://jsfiddle.net/zW4TR/
(note: you may need vendor prefixes on the transform style for some browsers, and also note that it won't work in IE8 or earlier as it doesn't support transforms. (there is a way of rotating in IE8, but it it's pretty ugly and quirky, and I would worry about how well they'd work with rotations inside rotations)
165
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
