HTML5 2 by 2 layout with Flex-box

Question

I am a application developer in the sense of offline applications or services with no front end so to speak, and it has been a long long time since I have seen any HTML or the likes.

But the new features of HTML5 actually got me interested, now I know that for now, Flex-box is not uniformly supported in the sense that you need to use webkit-box and moz-box etc.

But I figured that for a Blog I might start looking into changing the design.

But I can't quite figure our how you would go about making a 2 by 2 layout somewhat like:

• Top Left: Fixed height, Dynamic Width
• Top Right: Fixed height, Fixed Width
• Button Left: Dynamic height, Dynamic width.
• Button Right: Dynamic height, Fixed Width
• Logo overlapping from Top Left to button right.
• Small border between boxes.

Dynamic height on the lower to boxes is not a must, content will most likely fill them out as long as they are aligned.

But how would you best go about making this layout with the new facilities?

Edit: I gave up on this in the end.

Answer 1

For the layout, you can use

.wrapper {
  display: flex;
}
.left, .right {
  display: flex;
  flex-direction: column;
}
.right {
  width: 200px; /* Fixed width */
}
.top, .bottom {
  border: 1px solid;
  margin: 1px;
}
.top {
  height: 100px; /* Fixed height */
}
.bottom {
  flex-grow: 1; /* Same (flexible) height for both */
}

<div class="wrapper">
  <div class="left">
    <div class="top">Left top</div>
    <div class="bottom">Left bottom</div>
  </div>
  <div class="right">
    <div class="top">Right top</div>
    <div class="bottom">Right bottom</div>
  </div>
</div>

And to add the logo, you can create a triangle using the borders of a pseudo-element, and rotate it.

.wrapper {
  display: flex;
}
.left, .right {
  display: flex;
  flex-direction: column;
}
.right {
  width: 200px; /* Fixed width */
}
.top, .bottom {
  border: 1px solid;
  margin: 1px;
  position: relative;
}
.top {
  height: 100px; /* Fixed height */
}
.bottom {
  flex-grow: 1; /* Same (flexible) height for both */
}
.left > .top:after, .right > .bottom:after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
}
.left > .top:after {
    right: 0;
    bottom: 0;
    border-right: none;
    border-left: 15px solid black;
    transform: translateY(50%) rotate(45deg);
    transform-origin: right;
}
.right > .bottom:after {
    left: 0;
    top: 0;
    border-left: none;
    border-right: 15px solid black;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left;
}

<div class="wrapper">
  <div class="left">
    <div class="top">Left top</div>
    <div class="bottom">Left bottom</div>
  </div>
  <div class="right">
    <div class="top">Right top</div>
    <div class="bottom">Right bottom</div>
  </div>
</div>