Karolina Ticha Karolina Ticha - 6 months ago 21
HTML Question

css grid - fill 100% of parent which way - table-cell/float/inline-block?

Here is my simple grid

<div class="wrap">
<div class="left">
</div>
<div class="right">
<div class="top">
</div>
<div class="bottom">
</div>
</div>
</div>


Which way is the best for fulfill this


  • .left
    has 70% of
    .wrap
    width and 100% of
    .wrap
    height

  • .right
    has 30% of
    .wrap
    width and 100% of .wrap height

  • .top
    and
    .bottom
    fills 50% height of
    .right
    and 100% width



It should look like this

grid

I don't know which way is the best if
table-cell
,
inline-block
or
float
ing. I know that flexbox is the simplest solution, but I'd like to know other ways how to do that.

I created codepen as well

Answer

You Should be add box-sizing:border-box AND display:inline-block
To Div's , in css2 We adding float Property to Div's.
syntax Error founded at Line 27 backgroung

.wrap {
  width: 75%;
  margin: auto;
  border: 1px dotted black;
  height: 200px;
  font-size: 0;
  box-sizing: border-box;
}
.left {
  width: 70%;
  height: 100%;
  background: blue;
  box-sizing:border-box;
  display:inline-block;
}
.right {
  width: 30%;
  height: 100%;
  background: red;
  box-sizing:border-box;
  display:inline-block;
}
.top {
  width: 100%;
  height: 50%;
  background: green;
}
.bottom {
  width: 100%;
  height: 50%;
  background: yellow;
  box-sizing:border-box;
  display:inline-block;
}
<div class="wrap">
  <div class="left">
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>


http://codepen.io/webafrooz/pen/ZWPBWW