Have a fixed width right floated div drop below other content?

Question

I have a two column layout, The left hand column is flexible in size, but the right hand column has a fixed width. When you resize the browser, the left hand column shrinks to allow the right hand one always to fit.

At a set size however, when the left column reaches a min width (as dictated by the overall width of the window), we need to stack the columns using a media query, so that they can be unfloated and fill the space available to them.

The problem is that when this happens, the right hand column appears above the left column due to the way the markup has to be written. I need the right hand column (containing less important info) to be below the left hand column on smaller screens.

Is it possible to have the right column naturally fall below the left one? Either by achieving the size effect having it further along in the markup, or through some pure CSS solution?

I don't want to have to resort to javascript to change the element order, and if possible I don't really want to have to have duplicate divs with the same content to hide/unhide, however I understand if that's the only viable solution.

There's a demo fiddle here: http://jsfiddle.net/jmxu2/

<div class='column-contain'>
  <div class='c-right'>
      The right floated div is secondary content, but fixed width.  It should drop below the primary content when there isn't enough room.
  </div>
  <div class='c-left'>
      This left div is primary content, but non fixed in size.  When there isn't enough room to nicely display side by side, this div should be on top.
  </div>
</div>

otherDewi · Accepted Answer · 2013-09-29T20:23:34.863

1

The right column will appear on top because it is first in the HTML. If its not possible to reorder the elements in HTML try adding the following to your media query:

.c-left  {display: table-header-group; }
.c-right {display: table-footer-group; }

This will place each elements with those classes in a pseudo table and reorder them in the flow accordingly. The elements displayed as headers appear above those displayed as a footer.

edited Sep 29 '13 at 20:23

answered Sep 29 '13 at 00:34

otherDewi

1,098
10
24

This does work - but not on its own, it requires you to put display: table-header-group on the c-left column too. But thanks for pointing me in the right direction :-) – Codecraft Sep 29 '13 at 13:10
Yeah quite an omission cheers for the heads up. I have amended the answer to elaborate on this. – otherDewi Sep 29 '13 at 20:26

Have a fixed width right floated div drop below other content?

1 Answers1

Linked