View Special DIVS

**mostafa_dadgar** · 01-24-2016, 05:01 PM

Hi everyone
My DIV are shown below

Click image for larger version.

Name: 1.jpg
Views: 162
Size: 7.9 KB
ID: 5808

I want them to be shown as follows:

Click image for larger version.

Name: 2.jpg
Views: 153
Size: 7.7 KB
ID: 5809

**styxlawyer** · 01-24-2016, 05:19 PM

Have a look at this thread first.

**coothead** · 01-24-2016, 06:57 PM

Hi there mostafa_dadgar,

try it like this...

Code:


<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>divvy stuff</title>

<style media="screen">
body {
    background-color:#f0f0f0;
 }   
#container {
    width:394px;
    padding:8px 8px 0;
    margin:auto;
    border:1px solid #999;
    border-radius:10px;
    background-color:#fff;
    box-shadow:10px 10px 10px #999;
    overflow:hidden;
 }
.columns {
    float:left;
    width:126px;
 }
.margin {
    margin:0 8px;
 }
.columns div {
    border:1px solid #666;
    border-radius:8px;
    margin-bottom:8px;
    box-sizing:border-box;
    background:#ccc; 
    box-shadow:inset 0 0 20px #666;
 } 
.sixty {
    height:60px;
 }
.sixtyfive {
    height:65px;
 }
.ninety {
    height:90px;
 }
.onefifty {
    height:150px;
 }
@media screen and (max-width:452px) {
#container {
    width:260px;
  }
#container div:nth-child(3) {
    clear:left;
  }
.margin {
    margin:0 0 0 8px;
  } 
 }
@media screen and (max-width:324px) {
#container {
    width:126px;
  }
#container div:nth-child(2) {
    clear:left;
 }
.margin {
    margin:0;
  }
 }
</style>

</head>
<body>

<div id="container">

<div class="columns">
 <div class="ninety"></div>
 <div class="onefifty"></div>
 <div class="onefifty"></div>
</div>

<div class="columns margin">
 <div class="onefifty"></div>
 <div class="onefifty"></div>
 <div class="sixtyfive"></div>
</div>

<div class="columns">
 <div class="onefifty"></div>
 <div class="sixty"></div>
 <div class="onefifty"></div>
</div>

</div><!-- end #container -->

</body>
</html>

coothead