To achieve the desired layout where optionsWrapper
is positioned next to container
, you cannot solely rely on CSS. The two divs must be initially placed side by side, with one of them having an absolute height in pixels. Additionally, the parent container's positioning style must be set to relative
. By setting the position
property of optionsWrapper to absolute
and using left/top:0
, it will be positioned in the top left corner of the container.
This concept can be easily demonstrated through inline styles as shown below:
Standard styling without 'handheld' class (with options placed outside)
<div style="position: relative">
<div id="container"> stretching? lots of contents </div>
<div id="optionsWrapper"> left right </div>
</div>
Applying 'handheld' class to body:
<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>
View the demonstration here: http://jsfiddle.net/QzQCt/