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: 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/


    CSS Howto..

    Why is last select option always shown, even when styled out

    Formatting text, Suggestions with how-to?

    How to have dynamic image as CSS background?

    How to use JS to target specific domain html links with CSS classes?

    how to resize images inside a div inside another div with css?

    How do I do rounded corners in CSS in Google Chrome

    How do I use CSS to select for a tag with arbitrary name attribute?

    Superfish: How to keep sub menu open after it has been clicked

    How can I add a scrollbar to a DIV that contains a table?

    How to have a video take up the viewport height and width?

    CSS - How to working with multi-level menu by simple

    How to put an image at the left side of text without putting the image into css

    How to reveal a Text Field on a form when the Select shows 'Other' using just CSS

    how to create a rotateY animation via jQuery and css 3

    How to achieve proper CSS line-height consistency

    how to get these two div's side by side in this container

    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

    How do I override inline CSS with Class CSS? [duplicate]

    how to get the value of css style using jquery

    How to block CSS and js file loading in Google Blogger template?

    How to start ordered list from 2 not 1 with w3c validity and IE 6 compatibility?

    How to place HTML elements over inline SVG

    How to resize div size proportional with browser size?

    Divs are overlapping, how to fix? CSS

    Why does this menu render poorly in Firefox 3.5 and IE7? How do I adapt?

    How to add link without ruining transition CSS/HTML

    How to control css of images on top of a full page semi-transparent overlay div

    How to add styles based on whether top element is empty

    How do I span columns with a div based table?

    How to add CSS reference link to local HTML files in folder?