CODEWITHSUNDEEP
htmlcss
Ich
Ich

Reputation: 226

move middle div down if window gets smaller

I have three divs side by side. If the browser window gets smaller I want that the middle div moves down under the first div and the right div moves to the "middle".

For a better understanding, i made following outline enter image description here

Can someone please tell me how you'd do this?

Upvotes: 4

Views: 4711

Answers (3)

Teo
Teo

Reputation: 612

This jsfiddle should get you started. I forked Candlejack's fiddle, and tried to provide a css only solution.

Basically you put the 2nd div last:

<section id='container'>
  <div id='box-1' class='myBox'>1</div>
  <div id='box-3' class='myBox'>3</div>
  <div id='box-2' class='myBox'>2</div>
</section>

Then you float left div-1 and div-2 while the div-3 floats right, div-1 and div-3 have display: block; while div-2 display: inline-block;

#container { display:inline-block; width:100%; padding: 0.5em 0; border: 1px solid black;}
.myBox { display:inline-block; min-height: 100px; width:300px; margin: 0.5em 0 0.5em 3%; float:left; display: block; }
#box-1 { border:1px solid blue;}
#box-2 { border:1px solid red; display: inline-block; float: left;}
#box-3 { border:1px solid green;float:right;}

Upvotes: 2

iSqware
iSqware

Reputation: 156

Just a quick trick, however you may need to tweek a bit. http://jsfiddle.net/bd9yczqq/3/

[        <div><div class="box first"></div>
<div class="box middle"></div>
<div class="box last"></div></div>

.box{
width:200px;
    height:200px;
    float:left;
    border:1px solid #999;
    margin:5px 1%;
    background-color:#ccc;

}
.middle{

   float:right;
}

.last{
background-color:red;
}]

Upvotes: 2

Luka Krajnc
Luka Krajnc

Reputation: 915

Use relative positioning in your css for your divs and float them. Example:

position:relative;
float:left;

Upvotes: -2

Related Questions