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..

    How do I access separate points/sections on a single image in html/javascript?

    how to give margin between li using css?

    how can resize dynamically the logo of the header?

    How do I get pictures side by side (responsive)

    How can I get my hyperlink in HTML result in same page or window with or without using iframe tag or JavaScript?

    How to overwrite css animation

    How to select a non unique element through CSS

    How to target CSS module classes after they are hashed?

    How to id dom table so I can position it on page?

    How to contain text box in parent div

    How to position two blocks side by side with CSS

    how to simulate mouse hover on image in css

    How to change inline css using jquery in joomla

    how to control div size when other divs are changing [duplicate]

    How to reverse the float order of heading & body with CSS?

    How can I alter this CSS so that it only applies to a certain div?

    How to make this slider more fluid?

    How to center this flip card example?

    how to position an “Insert row” button in front of each horizontal row border of a table?

    How to reverse a CSS3 hover transformation?

    how to rotate text with css? transform is not supported by current schema?

    How to center an image, make it act as an link and have an mouseover command?

    How to include a static page with custom css and js files in a Rails application

    CSS: How to get rid of scroll (except when there's additional content)?

    how to align css content string

    How to “reset” style in view page, set in css file

    How to Style Template field in Grid View (aspx page and CSS attached)

    how change all fonts of a telerik control by one shot

    How to remove the double border bottom line below the breadcrumb

    How can i repeat the image rollover and have multiple aligned underneath on my website?