1

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/

mskfisher
  • 3,291
  • 4
  • 35
  • 48
agmcleod
  • 13,321
  • 13
  • 57
  • 96
  • What can you change? Only css? – mrtsherman Dec 15 '11 at 03:51
  • Why do you want the right one to come first in the html? – Mike Dec 15 '11 at 03:51
  • Yeah css only. I basically want this happen for when screens are smaller than 450px wide. I'm using CSS media queries on my personal site, so it's more mobile-user friendly. Basically the template I'm using is setup as such. It's a two column layout. The first div appearing on the right with float:right, the second appearing on the left with float:left. – agmcleod Dec 15 '11 at 03:54
  • This is a job for Bootstrap! col-sm-pull-8 & col-sm-push-8 – Rap May 17 '15 at 22:34

2 Answers2

5

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.

bookcasey
  • 39,223
  • 13
  • 77
  • 94
austinfromboston
  • 3,791
  • 25
  • 25
  • Definitely an interesting CSS rule, but it doesn't seem to be working for me. http://jsfiddle.net/NuAJ6/2/ There's my edits in the fiddle (your link didnt seem to have any). In both Firefox & chrome, they are still beside each other. Worse in firefox, it no longer accepts the width value, and just conforms to the text size. Any thoughts on how I can it further to do so? – agmcleod Dec 15 '11 at 04:42
  • I updated the jsfiddle. I know it's not idea functionality in Firefox, but I can't really think of when 30% of a 400px screen would be beneficial. – bookcasey Dec 15 '11 at 05:01
  • @agmcleod I am seeing the fix in both FF and Chrome, my link is different from the one you gave, http://jsfiddle.net/NuAJ6/3/ – austinfromboston Dec 15 '11 at 05:21
  • That does the trick! Thanks very much. I think i was missing a couple styles on the parent. – agmcleod Dec 15 '11 at 12:11
  • FYI, using this for a site at work. Tested on samsung galaxy to be working. – agmcleod Jun 13 '12 at 15:01
1

If you know the height and width of the elements, it's possible with margin.

.left {
  height:20px;
  width:70%;
  float:left;
  margin-left:-30%;
}

.right {
  width:30%;
  float:left;
  margin-top:20px;   
}

Demo

If you don't, JavaScript may be necessary. Here is a similar question.

Community
  • 1
  • 1
bookcasey
  • 39,223
  • 13
  • 77
  • 94
  • Yeah unfortunately the height varies as this is a template. I have a pretty good idea on how to do it with javascript. Was just hoping to avoid it, because then i need to add an event on screen resizing. – agmcleod Dec 15 '11 at 04:43
  • This doesn't seem possible without knowing the height. – Wex Dec 15 '11 at 08:58