Geek Answers Handbook

Left floating div place below another div

I have two divs, while (div 1) floats to the left and (div 2) floats to the right. I create a responsive layout when when changing the viewport (div 1) it will be under (div 2). I created a simple image through MS Paint to simplify the illustration as well as some code. In addition, both contain dynamic content, so their heights should not be fixed.

No javascript (if possible) just CSS. I only know how to put div 2 under div 1, but not vice versa.

Does anyone know how I can 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 , div1 , div2. ( div2 div1), . .

+4
2

. -, , , div .

html div ():

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

Css, div, :

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

, div , css - :

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

- jsfiddle, . , , div .

+3

-, CSS, div, , , . div 1 , div 2 div 2 , div 1 .

+2

More articles:


All Articles