Question

The description is kind of confusing, but I have two divs. One which sits on the left on the page, one which sits on the right via floats. The one on the right is first in the HTML, the one on the left is second. Basically, i want to have it so the left div sits on top, and the right div sits below it. If Left and Right were in order on the HTML, it would be as simple as removing the floats. However, since this is not the case, i need a bit of a hand. Here’s a jsfiddle i have setup: http://jsfiddle.net/7bTjj/

Answer 1

Back in the day you would have to use absolute positioning. Now you can resolve this issue using CSS3 properties created for managing layout.

Use display:box and box-ordinal-group properties to display the contents of your .container in whatever order you like, without using floats at all:

(-webkit vendor prefixes only for simplicity)

.container, .left, .right {
  display:-webkit-box;
  -webkit-box-orient: vertical;
}

.left {
  -webkit-box-ordinal-group: 1;
}

.right {
  -webkit-box-ordinal-group: 2;
}

Since you’re targeting mobile, IE’s lack of support should not be a problem.

Here’s my fork of your fiddle.

Isotoma has a nice, readable introduction to flexbox that I referenced while tweaking your CSS.