Home/ Questions/Q 8639423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T11:00:05+00:00

This is what I’ve created . I’m setting class=’handHeld’ to <body> in iPad, based

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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/

    • 0