CODEWITHSUNDEEP
htmlcss
Arch8
Arch8

Reputation: 41

How to create this layout using "display:inline-block or block or inline" properties in style sheet?

enter image description here

I'm stuck with wrong output.

Code:

<!DOCTYPE html>
<html>
<head>
   <style>
     .largebox { display: block; margin: 10px; border: 3px solid #73AD21; }
     .box1 { display:inline-block; width:20%; height:200px; border:2px solid red; }
     .box2 { display:inline-block; width:78%; height:100px; border:2px solid red; }
     .col1 { display:inline-block; border:2px solid red; }
   </style>
</head>
<body>
   <div class="largebox"> <div class="box1">
      <div class="leftbox"></div>
   </div>
   <div class="box2">
      <div class="col1">float</div>
   </div>
</body>
</html>

Upvotes: 0

Views: 811

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122037

You can create this layout with Flexbox.

.largebox, .bottom, .box1 {
  display: flex;
  flex: 1;
}
.box2 {
  flex: 3;
}
.box {
  border: 1px solid black;
  margin: 10px;
  padding: 25px;
  flex: 1;
}
<div class="largebox">
  <div class="box1">
    <div class="box">Div</div>
  </div>
  <div class="box2">
    <div class="box">Div</div>
    <div class="bottom">
      <div class="box">Div</div>
      <div class="box">Div</div>
      <div class="box">Div</div>
    </div>
  </div>
</div>

This is how you can create same layout with inline-block, note that height on container is fixed.

* {
  box-sizing: border-box;
}
.largebox {
  height: 300px;
}
.bottom, .box1, .box2 {
  display: inline-block;
  vertical-align: top;
}
.box1 {
  width: calc(30% - 10px);
  height: 100%;
}
.box2 {
  width: calc(70% - 10px);
  height: 100%;
  margin-left: 5px;
}
.box {
  border: 1px solid black;
  margin: 10px;
  padding: 25px;
  display: inline-block;
  width: 100%;
  height: 100%;
}
.box2 > .box {
  height: 50%;
  margin-bottom: 0;
  width: calc(100% - 10px);
}
.bottom {
  width: 100%;
  height: 50%;
  padding-bottom: 10px;
}
.bottom > .box {
  width: calc(33.334% - 10px);
  margin-right: 0;
}
<div class="largebox">
  <div class="box1">
    <div class="box">Div</div>
  </div>
  <div class="box2">
    <div class="box">Div</div>
    <div class="bottom">
      <div class="box">Div</div><div class="box">Div</div><div class="box">Div</div>
    </div>
  </div>
</div>

Upvotes: 2

Cezary Tomczyk
Cezary Tomczyk

Reputation: 584

I'd consider experiment with CSS property flex: https://developer.mozilla.org/en/docs/Web/CSS/flex

or use some grid templating system, e.g. Bootstrap https://getbootstrap.com/examples/grid/

Upvotes: 0

Related Questions