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/

You should be floating both of your divs not just the one wrapping the image: <div style="float:left;"> <img src="http://www.placecage.com/50/50"/> </div> <div style="float:left;"> <span style="font-size:18px;margin-bottom:20px;"> Completed</span><br/> <span>Well done, you have...

I would like to know how can i do tab spaces after a word so that the pattern that comes after that would be align with each other

HTML ignores white spaces between tags, so it is not possible to use tabs. Instead, it would be better if you add a container to your course title, and fix...