6

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

18
  • put float:left on both, and then move div2 above div1 :) I doubt this is possible without moving the div2 up
    – tckmn
    Sep 20, 2013 at 1:25
  • 1
    Wait, so you want the thing that semantically comes first in the layout to be presented second visually?
    – user764357
    Sep 20, 2013 at 1: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, 2013 at 1:27
  • 3
    SEE HERE PLEASE: stackoverflow.com/questions/9485493/… Sep 20, 2013 at 1:29
  • 1
    @Elmer which <div> is the sidebar? Since the left and right floats will not be affected by order in your HTML, you can simply put <div2> HTML in front of <div1> (or vice versa) to achieve the desired effect Sep 20, 2013 at 1:33

2 Answers 2

3

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.

2
  • 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, 2013 at 3: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. Sep 20, 2013 at 9:56
2

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.