How to switch position of 2 divs using only CSS?

Problem :

This is what I've created. I'm setting class='handHeld' to <body> in iPad, based on which the optionsWrapper and #container should switch positions using CSS classes I've defined at the bottom in jsfiddle.net.

.handHeld div.optionsWrapper { ... }
.handHeld div#container { ... }

to something like this: enter image description here

How to achieve that using CSS only? Please note that first 3 rows (green, gray and blue) may not be present always so I can not grab their height statically to position div.optionsWrapper?

Solution :

Since optionsWrapper is a child of container, you cannot do this via CSS. You must have the two divs side by side as start. Then, one of the two divs must have an absolute height (in px). And last but not least, the position style of their parent must be relative. Having the parent relative, setting absolute left/top:0 on optionsWrapper should put it in top left corner of container.

Easiest illustrated via inline styles here:

with no 'handheld', your standard styling (but with options 'outside')

<div style="position: relative">
   <div id="container">   stretching? lots of contents   </div>
   <div id="optionsWrapper"> left right </div>
</div>

when body has the 'handheld' class:

<div style="position: relative; overflow:hidden:">
   <div id="container" 

          style="margin-top: 50px; z-index:9;">

         stretching? lots of contents
   </div>
   <div id="optionsWrapper" 

          style="position:absolute; top:0; left:0; z-index:99;">

      left right 
   </div>
</div>

http://jsfiddle.net/QzQCt/

<a href="url to the webpage"> <img src="Logo.png" onmouseover="this.src='your_other_image'" onmouseout="this.src='Logo.png'" /> </a> Using JavaScript you can have the default image displayed before the onmousehover event changes the image to a second...