Left-floated div place below another div

Question

I have two divs whereas (div 1) is floated left while (div 2) is floated right. I am creating a responsive layout where when the viewport changes, (div 1) will go under (div 2). I created a simple image via MS Paint for an easier illustration and also some code. Also, both contain dynamic content so their heights must not be fixed.

No javascript (if possible) just plain CSS. I only know how to put div 2 under div 1 but not the other way around.

Does anyone know how I could achieve this?

enter image description here

HTML:

 <div id="div1 sidebar" style="float: left;">
   //dynamic content
 </div>

 <div id="div2 content" style="float: right;">
  //dynamic content
 </div>

HTML is auto generated so in the markup, div1 originally comes first than div2. Not advisable to change the order (place div2 above div1) since many pages use the same layout. See code above

put `float:left` on both, and then move div2 above div1 :) I doubt this is possible without moving the div2 up — tckmn, Sep 20 '13 at 01:25
Wait, so you want the thing that semantically comes first in the layout to be presented second visually? — , Sep 20 '13 at 01:27
@Doorknob Hm. in that case, how do I put div 2 on top? :) What's important is that div1 must always be underneath — Elmer, Sep 20 '13 at 01:27
Select the code in the HTML file, cut, and paste above div1. :) — tckmn, Sep 20 '13 at 01:28
SEE HERE PLEASE: http://stackoverflow.com/questions/9485493/css-floats-change-order-on-mobile-layout/9485567#9485567 — Patrick Moore, Sep 20 '13 at 01:29
@LegoStormtroopr Yup, because div1 is a sidebar and must it below div2 which is the main content. — Elmer, Sep 20 '13 at 01:29
@SetSailMedia I already checked that but the HTML markup is autogenerated. sidebar comes before the content. — Elmer, Sep 20 '13 at 01:32
You can combine the answer in the link I gave with media queries as @box86rowh suggests, and should solve your issue :) — Patrick Moore, Sep 20 '13 at 01:32
@JoshC The HTML markup is auto generated. sidebar comes before content. — Elmer, Sep 20 '13 at 01:33
http://stackoverflow.com/questions/11962837/how-do-i-dynamically-adjust-css-stylesheet-based-on-browser-width This could also help. — porfiriopartida, Sep 20 '13 at 01:33
@Elmer which
is the sidebar? Since the left and right floats will not be affected by order in your HTML, you can simply put HTML in front of (or vice versa) to achieve the desired effect — Patrick Moore, Sep 20 '13 at 01:33
@SetSailMedia div1 is the sidebar :) and the html is created by a joomla template. — Elmer, Sep 20 '13 at 01:35
@JoshC Sidebar(div1) comes before the content div (div2). I cannot change the order because it is auto generated via php. I am using media queries that is why I am trying to achieve this only using CSS :) — Elmer, Sep 20 '13 at 01:39
@KeithNicholas Some pages use the same PHP layout. Just wondering if this can be done with CSS only :) — Elmer, Sep 20 '13 at 01:45
wild suggestion, considering i don't know what the divs contain etc. what happens if you float:right both the divs — om_deshpande, Sep 20 '13 at 01:53
@om_deshpande div1 will go above div2. i am trying to put div2 above div1 without changing the html — Elmer, Sep 20 '13 at 03:15

score 3 · Answer 1 · answered Sep 20 '13 at 02:27

There is my proposition. Using media queries, find the largest width that you want your divto stay side by side.

In your html, place your div like this (the right one before):

<div class="div2">
    div 2
</div>
<div class="div1">
    div 1
</div>

The css used to display those div should look like this:

.div1 {
    float: left;
    width: 25%; 
}
.div2 {
    float: right;
    width: 75%;
}

Finally, to display your left div below the right one, your should add in you css something like this:

@media all and (max-width: 480px) {
    .div1, .div2 { 
        float: none;
        display: block; 
    }
}

Here is a jsfiddle that demonstrate this coding. You only have to resize your browser to see your left div going right under your right one.

The HTML must not be rearranged :( Other pages use the same order. Div1 must always come before Div2 in the HTML. HTML order must not be changed. Only the CSS. — Elmer, Sep 20 '13 at 03:13
Even if the html is rearranged and that div2 is written before div1, div1 will always be at the left of div2. See the jsfiddle. — service-paradis, Sep 20 '13 at 09:56

score 2 · Answer 2 · answered Sep 20 '13 at 02:43

I would use a media query to change the CSS styles applied to each of those divs when the viewport is sized to where you want the change to occur. Then float div 1 to the right, float div 2 to the left and give div 2 a big enough right margin that it pushes div 1 down to the next row.

Left-floated div place below another div

2 Answers2

Linked