Hi everyone
My DIV are shown below
Attachment 5808
I want them to be shown as follows:
Attachment 5809
Printable View
Hi everyone
My DIV are shown below
Attachment 5808
I want them to be shown as follows:
Attachment 5809
Have a look at this thread first.
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