How to switch position of 2 divs using only CSS?
Tags: javascript,jquery,html,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:
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>