CODEWITHSUNDEEP
htmlcssflexbox
user1154112
user1154112

Reputation: 83

Can this box tile layout arrange with pure CSS?

Is there a way to create this flexible layout arrangement with pure CSS?

My experiments have so far been unsuccessful :( The width and height should be flexible!

enter image description here

Upvotes: 2

Views: 1468

Answers (2)

Ibraheem Zafar
Ibraheem Zafar

Reputation: 346

<div class="container" style="position: relative;">
  <div class="sidebar" style="background-color: red; height: 214px; width: 214px; position: relative;margin-right: 76px;right: -1px;padding-right: 0px;"></div>
  <div class="content" style="background-color: blue; height: 100px; width: 120px; position: relative;top: -214px;left: 223px;"></div>
  <div class="subscript" style="background-color: green; height: 198px; width: 121px; position: relative;top: -195px;left: 222px;"></div>
  <div class="sidebar" style="background-color: black; height: 227px; width: 100px;position: relative;top: -287px;"></div>
  <div class="content" style="background-color: #434343; height: 100px; width: 105px; position: relative;top: -514px;left: 107px;"></div>
  <div class="subscript" style="background-color: #462312; height: 109px; width: 231px; position: relative;top: -499px;left: 108px;"></div>
</div>

Upvotes: 1

Suresh Karia
Suresh Karia

Reputation: 18218

You can do using absolutely positioned div and percentages in height and width.

body {
  padding: 0;
  margin: 0;
}
.container {
  overflow: auto;
}
.box {
  background: #000;
  display: block;
}
.one {
  position: absolute;
  height: 40%;
  width: 57.5%;
  left: 0;
  top: 0;
}
.two {
  position: absolute;
  height: 25%;
  width: 40%;
  right: 0;
  top: 0;
}
.three {
  position: absolute;
  height: 55%;
  width: 35%;
  left: 0%;
  bottom: 0;
}
.four {
  position: absolute;
  height: 25%;
  width: 20%;
  left: 37.5%;
  top: 45%;
}
.five {
  position: absolute;
  height: 40%;
  width: 40%;
  right: 0;
  top: 30%;
}
.six {
  position: absolute;
  height: 25%;
  width: 62.5%;
  right: 0;
  bottom: 0;
}
<div class="container">
  <div class="one box"></div>
  <div class="two box"></div>
  <div class="three box"></div>
  <div class="four box"></div>
  <div class="five box"></div>
  <div class="six box"></div>
</div>

Upvotes: 4

Related Questions